Mozilla上具有float的多選選項和CSS樣式

Question

我正在嘗試修改多項選擇的CSS。 我在Chrome上的結果還可以，但是我無法使其在Mozilla上運行。 選項上的浮點數使其占據全角。 因為很難這樣描述，這就是我想要做的事情：

 $('option').mousedown(function(e) { e.preventDefault(); $(this).prop('selected', !$(this).prop('selected')); return false; }); 

  select[multiple='true'] option{ float:left; border: solid 1px #71aa29; padding: 5px; margin: 2px; transition:0.2s ease; cursor:pointer; } select[multiple='true']{ border:none; outline: none; width:100%; height:200px; overflow:hidden; } select[multiple='true']>option:checked, select[multiple='true']>option:hover { background: #71aa29 linear-gradient(0deg, #71aa29 0%, #71aa29 100%); color:#ffffff; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <select multiple="true"> <option >Lorem ipsum dolor sit amet Molestias,</option> <option >Consectetur adipisicing elit.</option> <option >Similique alias</option> <option >Maiores fugiat voluptate</option> <option >Molestiae modi amet eaque qui atque eius</option> <option >Magni, doloremque hic consequatur minus</option> <option >Voluptatem libero maxime porro.</option> </select> 

任何建議我都會很高興。 謝謝。

Answer 1

如果我理解正確，我認為以下內容將為您提供所需的信息。

select[multiple='true'] option{
    display: inline-block; /* no float inline-block instead */
    border: solid 1px #71aa29;
    padding: 5px;
    margin: 2px;
    transition:0.2s ease;
    cursor:pointer;
}