Как сделать поле выбора HTML с двумя (независимыми) флажками в чистом CSS - PullRequest
Новая
       40

Как сделать поле выбора HTML с двумя (независимыми) флажками в чистом CSS

0 голосов
/ 21 ноября 2019

Мне нужно составить список выбора, в котором у каждого элемента есть два флажка (или, по крайней мере, один флажок, который может принимать 3 значения: 'x' 'v' или 'blank').

Rightтеперь я сделал с CSS, используя selected и добавив символ 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>

, и это вывод: Желаемый: Desired Ток: Current

Примечание: очевидно, я бы хотел получить как первое, так и второе значения выбора. И, если возможно, не показывать какие-либо выделения (достаточно выбора)

1 Ответ

1 голос
/ 21 ноября 2019

Я не думаю, что вы можете поставить функциональный флажок внутри выбранного ввода без использования 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...