如何在纯CSS中使HTML选择字段具有两个（独立的）复选框

Question

我需要做出一个选择列表，其中每个项目都有两个复选框（或者至少一个可以采用3个值的复选框：'x'，'v'或'blank'）。

现在，我使用选定的CSS字符并添加了Unicode字符2611/2610，但是它只有两种可能的状态，如果我添加第二个复选框，它也会随着单击而切换。

此代码是我目前的情况：CSS：

select.control option::before {
  content: "\2610"; /*2612 è la crocetta*/
  width: 1.3em;
  text-align: center;
  display: inline-block;
}

select.control option:checked::before {
  content: "\2611";
}

select.control[multiple]{
    overflow-y:scroll;
    min-height: 40px;
    max-height: 30%
}

HTML：

<html>
<head><link rel='stylesheet' href='my.css'></link></head>
<body>
  <fieldset class='field_set'> 
    <span class='field_span'>
      <label style='vertical-align: top;'>Postazioni</label>
      <select class='control' name="Choose values" multiple='multiple'>
        <option value='v1'>P 1</option>
        <option value='v2'>P 2</option>
        <option value='v3'>P 3</option>
      </select>
    </span>
  </fieldset>
</body></html>

这是输出：期望的：当前：

注意：很明显，我想同时获得第一个和第二个选择值。并且，如果可能的话，不显示任何突出显示（选择就足够了）

Answer 1

我认为您可以在不使用JavaScript的情况下将功能性复选框置于选择输入中。最简单的方法可能是设置复选框列表的样式，使其像下拉菜单一样显示。

简单的解决方案可能是只使用选项组，然后将多个复选框分解为单个选项：

select {
width: 50%;
}

<form id="form1" class="example-form">
  <label>Option Groups
    <div>
      <select id="options" name="opt" placeholder="select one" required class="select-css">
      <option value="" disabled selected>Select One</option>
        <optgroup label="Giraffe">
          <option value="chk-green">Green Giraffe</option>
          <option value="chk-purple">Purple Giraffe</option>
          <option value="chk-both">Green &amp; Purple Giraffe</option>
        </optgroup>
        <optgroup label="Pangolin">
          <option value="png-orange">Orange Pangolin</option>
          <option value="png-pink">Pink Pangolin</option>
          <option value="png-both">Orange &amp; Pink Pangolin</option>
        </optgroup>
      </select>
    </div>
  </label>
</form>

如何在纯CSS中使HTML选择字段具有两个（独立的）复选框

问题描述投票：-1回答：1

1个回答

最新问题

如何在纯CSS中使HTML选择字段具有两个（独立的）复选框

问题描述 投票：-1回答：1

1个回答

最新问题

问题描述投票：-1回答：1