Is there any way to add padding to select options via CSS?
Styling to select option is very much limited as to maintain a coherence and consistency among all the application in the operating system thus the browser are ought to restrict the style of some basic elements like in your case option tag.
The restriction depends browser to browser, like padding and even margin of option tag works in the Mozilla Firefox while it doesn't work with Chrome.
If it is very much necessary in you website to style the option tag then I suggest you to use some jQuery plugin (you can also make a drop down of your own, its simple).
Select options dropdown not working on chrome
You shouldn't attach click
events directly to <option>
s. The way you get the selected option is by listening for the change
event on the <select>
.
After the change, this
in your openCity
function, refers to the <select>
. I'm getting the selected text like this:
this.options[this.selectedIndex].text // Paris, London, etc.
These values match up with the id
s of your .tabcontent
<div>s
. Then we show the content.
document.getElementById(
this.options[this.selectedIndex].text
).style.display = "block";
document.querySelector('.tab').addEventListener('change', openCity);
function openCity(evt) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById( this.options[this.selectedIndex].text ).style.display = "block";
evt.currentTarget.className += " active";}
body { font-family: Arial;}
.tab { overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1;}
.tab option { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; font-size: 17px;}
.tab option:hover { background-color: #ddd;}
.tab option.active { background-color: #ccc;}
.tabcontent { display: none; padding: 6px 12px; -webkit-animation: fadeEffect 1s; animation: fadeEffect 1s;}
@-webkit-keyframes fadeEffect { from { opacity: 0; } to { opacity: 1; }}
@keyframes fadeEffect { from { opacity: 0; } to { opacity: 1; }}
<select class="tab"> <option value="london" class="tablinks">London</option> <option value="paris" class="tablinks">Paris</option></select>
<div id="London" class="tabcontent"> <h3>London</h3> <p>London is the capital city of England.</p></div>
<div id="Paris" class="tabcontent"> <h3>Paris</h3> <p>Paris is the capital of France.</p></div>
Why won't padding-left in select box options show in Chrome but works in FF?
Found the answer. Sadly chrome doesn't support giving styles to option.
Related Topics
Css Overflow-X: Visible; and Overflow-Y: Hidden; Causing Scrollbar Issue
Shape With a Slanted Side (Responsive)
How to Have an Onclick Effect in Css
Is Putting a Div Inside an Anchor Ever Correct
Applying an Ellipsis to Multiline Text
One Flex/Grid Item Sets the Size Limit For Siblings
Is There a ≪Meta≫ Tag to Turn Off Caching in All Browsers
How to Set the Height of an Outer Div to Always Be Equal to a Particular Inner Div
Flex/Grid Layouts Not Working on Button or Fieldset Elements
How to Keep Parents of Floated Elements from Collapsing
How to Align 3 Divs (Left/Center/Right) Inside Another Div
Center Image Using Text-Align Center
Why Is There an Unexplainable Gap Between These Inline-Block Div Elements
Styling an Input Type="File" Button
Css Technique For a Horizontal Line With Words in the Middle