可能有很多,很多方法可以做到这一点,但我尽量保持简单,所以我的模拟方法只使用CSS.它是相当简单的骨头,但我想指出这样做并不复杂,你可能不需要插件来做它.

注1：我使用< label>而不是使用< option>.由于< label>是一个交互式元素,在内部放置一些交互式内容(如< button>)可能会搞砸它.无论如何,选项通常都是非交互式的,但请注意,这种简单的仿真无法完成所有操作.

注意2：如果您希望能够选择多个选项,只需搜索“radio”并替换为“checkBox”.

Emulating Select Using Radio – No Collapse

input[type="radio"] {
  display: none;
}

input[type="radio"]:checked + label {
  background-color: black;
  color: #28AADC;
}

/* none functional styles.  just regular styling */
.radio_select {
  background-color: #28AADC;
  display: inline-block;
}

dio_select">
  dio" name="radio_select" />
    dio" name="radio_select" checked="checked" />
    dio" name="radio_select" />
    

input[type="radio"] {
  display: none;
}

/* style this to your heart's content */

input[type="radio"] + label {
  display: none;
}

input[type="radio"]:checked + label {
  background-color: black;
  color: #28AADC;
  display: inline-block;
}

.radio_select:hover label {
  display: inline-block;
}


/* none functional styles.  just regular styling */

.radio_select {
  background-color: #28AADC;
  display: inline-block;
}

 原文链接：https://www.f2er.com/css/427385.html