网站语言选择功能用什么HTML标签可自由自定义CSS样式？

针对你要求所有语言选项始终全部可见、可通过CSS自由自定义样式、固定在页面右上角的需求，第二种<input type="radio"> + <label>的方案客观上更适配。

两种方案的优缺点 #

1. <select> + <option>方案 #

• 优点：
  • 原生表单控件，自带互斥选中逻辑和表单提交能力，无需额外JS处理取值逻辑
  • 原生无障碍支持完善，代码量极低
• 缺点：
  • 完全不满足你「所有选项始终全部可见」的需求：原生select默认是下拉折叠态，仅点击才会展开选项，即使添加size属性强制展示所有选项，不同浏览器的渲染差异极大，布局可控性极低
  • 样式自定义限制极多：原生option的背景、边框、选中态、图标嵌入都很难通过CSS修改，完全达不到自由自定义样式的要求

2. radio + label方案 #

• 优点：
  • 完全匹配你的需求：所有选项默认全部可见，只需给外层.language容器添加position: fixed; top: 10px; right: 10px即可固定在右上角
  • 样式自定义自由度极高：可以隐藏原生radio控件，完全通过label自定义样式，不管是嵌入svg国旗、添加选中阴影、hover动效都可以实现
  • 原生自带互斥选中逻辑，无需额外JS写状态管理，自带value属性，表单提交或JS取值都很方便
• 缺点：
  • 代码量比select方案略多，需要自行编写CSS实现布局和选中态样式
  • 默认是纵向排列，要改成横向展示需要删除<br>标签，改为flex布局

其他更合适的实现方案 #

目前主流站点更常用<ul> + <li> + <button>的实现方案，和你提到的参考效果图逻辑一致，示例代码如下：

<ul class="language-switcher">
  <li class="lang-item">
    <button type="button" data-lang="ita">
      <svg><!-- 意大利国旗SVG代码 --></svg>
      <span>ITA</span>
    </button>
  </li>
  <li class="lang-item active">
    <button type="button" data-lang="eng">
      <svg><!-- 英国国旗SVG代码 --></svg>
      <span>ENG</span>
    </button>
  </li>
  <li class="lang-item">
    <button type="button" data-lang="fre">
      <svg><!-- 法国国旗SVG代码 --></svg>
      <span>FRE</span>
    </button>
  </li>
</ul>

这个方案的优势：

• 语义化更合理：语言切换本质是一组功能操作按钮，列表结构更符合语义规范
• 布局和样式自由度最高，完全不受原生表单控件的限制，适配各种设计需求
• 交互逻辑更灵活，不管是点击跳转页面还是异步切换站点语言都可以很方便的实现

内容的提问来源于stack exchange，提问作者Enlico