Mozilla上具有float的多选选项和CSS样式

Question

I am trying to modify the CSS of a multiple select. I'm ok with the result on Chrome but i can't manage to make it work on Mozilla. The float on the option make it take full width. Because it's hard to describe like this here is what i'm trying to do :

 $('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> 

I will be glad for any suggestions. Thank you.

Answer 1

If I understand correctly, I think the following gives you what you want.

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