Problemy z Chrome z display-inline dla <select><option> znaczników

Mam problem, w którym nie mogę uzyskać tego samego fragmentu CSS, aby renderować to samo w Firefoksie i Chrome. Zamiast pionowej zaznaczania wartości 24, wszystkie one zostaną wyświetlone w linii obok siebie Firefox:Problemy z Chrome z display-inline dla <select><option> znaczników

W Chrome, pojawiają się one w postaci pionowego wielokrotnego zaznaczania.

Kompletna kodują skróconą przykład 3 godziny:

<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>

W Chrome opcje nie inline wyświetlić.

Jakiekolwiek wyjaśnienie, dlaczego ten kod jest/nie działa i czy istnieją inne sposoby na osiągnięcie tego samego układu?

Źródło

2012-08-31 dsh

Nie sądzę, że powinieneś (może?) Utworzyć w ten sposób elementy <option>. Zamiast tego spróbuj użyć pól wyboru. Coś jak 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>

Źródło

2012-08-31 18:16:20

Dzięki za odpowiedź. Nie zgadzam się z tym, że opcji nie można wprowadzić inline - wypróbuj mój kod w FireFox. To powiedziawszy, to podejście jest sprytne i ma właściwą podstawową funkcjonalność. Jest jednak kilka różnic funkcjonalnych, które moim zdaniem są ważne. Ponieważ był to wybór wielokrotny, użytkownik może przytrzymać przesunięcie i przeciągnąć w ciągu pożądanych godzin. W tym przykładzie użytkownik musi indywidualnie wybrać każdą godzinę. W mojej prawdziwej aplikacji jest 24 opcji, a nie 3. Kliknięcie do 24 razy nie jest przyjazne dla użytkownika. – dsh

@dsh - To prawda, ale tylko dlatego, że jedna (lub nawet więcej niż jedna) przeglądarka pozwala odejść, nie oznacza, że powinieneś to zrobić. Nie jestem pewien, co by powiedział specs, ale bym traktował fakt, że Firefox pozwala na to jako podejrzane - mam na myśli '

Problemy z Chrome z display-inline dla <select><option> znaczników

Odpowiedz