Padding / margin top / botton by node option - different browser display
I need to set extra space inside an option to make it easier to read.
I tried with this:
option {
padding: 2px 8px;
&:first-of-type {
padding-top: 8px;
color: red;
}
&:last-of-type {
padding-bottom: 8px;
color: blue;
}
}
It only works on firefox. On chrome / webkit and IE9, only colors are displayed.
Switching from padding to edge will not change anything.
Has anyone encountered this problem?
+3
source to share
1 answer
It is not possible to overwrite certain browser form elements.
If you want the dropdown to look the same in every browser use some plugin like chosen or select2
$(document).ready(function() {
$('select').select2({
width: '200px'
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<select>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>E</option>
</select>
0
source to share