Home/ Questions/Q 8467925
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T15:47:14+00:00

I am having an issue where I cannot get the same bit of CSS

  • 0

I am having an issue where I cannot get the same bit of CSS to render the same across Firefox and Chrome. Instead of a vertical select box of 24 values, they all appear in a line next to each other in Firefox:

In Chrome, they appear as a vertical multiple select box.

Complete code for an abbreviated 3 hour example:

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

In Chrome, the options do not display inline.

Any explanations why this code does/does not work and are there any other ways to achieve the same layout?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I don’t think you should (can?) make <option> elements inline like that. Try using checkboxes instead. Something like 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>
    • 0