Подтвердить что ты не робот

Проблемы с Chrome с помощью встроенного дисплея для тегов <select> <option>

У меня проблема, когда я не могу получить один и тот же бит CSS, чтобы сделать то же самое в Firefox и Chrome. Вместо вертикального блока выбора из 24 значений все они отображаются в строке рядом друг с другом в Firefox:

В Chrome они отображаются как вертикальный блок множественного выбора.

Полный код для сокращенного 3-часового примера:

<html>
  <head>
    <style type="text/css">
      option { display: inline; }
    </style>
  </head>
  <body>
    <form>
      <select id="aryHours[]" class="select_hours" size="1" multiple="multiple" name="aryHours[]">  
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
    </form>
  </body>
</html>

В Chrome параметры не отображаются в строке.

Любые объяснения, почему этот код работает/не работает, и есть ли другие способы достижения одного и того же макета?

4b9b3361

ОТВЕТЫ

Ответ 1

Я не думаю, что вы должны (может?) сделать <option> элементы inline, подобные этому. Вместо этого попробуйте использовать флажки. Что-то вроде this:

<!DOCTYPE html>
<html>
 <head>
     <title>Inline Options</title>
     <style>
         ul {
             list-style:none;overflow:hidden;
         }
         ul li {
             lit-style:none;
             float:left;
             position:relative;
         }
         ul li input[type="checkbox"] {
             position:absolute;
             top:0;
             right:0;
             bottom:0;
             left:0;
             width:100%;
             height:100%;
             opacity:0;
         }
         ul li input:checked + label {
             background:blue;
         }
     </style>
 </head>
 <body>
     <form action="#" method="get">
         <ul>
             <li>
                 <input type="checkbox" name="aryHours[]" id="checkbox1" />
                 <label for="checkbox1" class="">Option 1</label>
             </li>
             <li>
                 <input type="checkbox" name="aryHours[]" id="checkbox2" />
                 <label for="checkbox2" class="">Option 2</label>
             </li>
             <li>
                 <input type="checkbox" name="aryHours[]" id="checkbox3" />
                 <label for="checkbox3" class="">Option 3</label>
             </li>
         </ul>
     </form>
 </body>
</html>