I have problem with :nth-child in IE.
Please run this script in IE and Firefox (I make a test in IE 11 and Firefox 44.0.2.): LINK
<div class="dropdown">
<select class="dropdown-select" onchange="if (this.value) window.location.href=this.value">
<option value="#">Wybierz swoją szkółkę</option>
<option value="http://xxx">1</option>
<option value="http://xxx">2</option>
<option value="http://xxx">3</option>
<option value="http://xxx">4</option>
<option value="http://xxx">5</option>
<option value="http://xxx">6</option>
</select>
</div>
select option:nth-child(5){
display:none;
color:red;
}
I want to hide 5th option.
Thx for help! My solution:
var elem = document.getElementById("divid");
elem.parentNode.removeChild(elem);
Related
I can not change color for a disabled option on Chrome and Safari for MAC OSx. On firefox this code works. How can i override styles cross browser?
option:disabled {
color: #a69474;
}
<select>
<option value="volvo">Volvo</option>
<option disabled value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
It is working fine in chrome
option:disabled {
color: #a69474;
}
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option disabled value="audi">Audi</option>
</select>
Styling of tags is not currently supported by WebKit browsers on Mac OS X. You may find some more ideas here: Pure CSS solution to styling specific options in webkit based browsers?.
source: CSS: Dropdown option text color not working on Mac OS X
I'll try with -webkit-appearance:none, outline:none but this issue isn't fix, Please give CSS solution for remove default value in chrome.
select:invalid { color: gray; }
<form>
<select required>
<option value="" disabled selected hidden>Please Choose...</option>
<option value="uno">one</option>
<option value="dos">two</option>
</select>
</form>
For example:
<select>
<option value="one">1</option>
<option value="two">2</option>
<option value="three">3</option>
</select>
I want to select the option where value = one, but I must select using the value attribute.
I've tried a few variations as the ones below:
option[value="one"]{
}
select[value="one"]{
}
select option[value="one"]{
}
option[value=two] {
background-color: yellow;
}
<select>
<option value="one">1</option>
<option value="two">2</option>
<option value="three">3</option>
</select>
Here is the code what i tried to get rid from my problem,
HTML
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</body>
</html>
css
select[optiopn:selected]{
background-color:white;
}
here is the screenshot
You can achieve it using like this.
select:focus::-ms-value {background-color: white; color:#000;}
DEMO
Use:
background-color: transparent;
I am using wicket framework and overriding appendOptionHtml of ListMultipleChoice
to generate below select tag and using CSS :before to place red * before option text
it is working fine in FF but not in IE.
CSS:
.required:before {
content: "*";
color: #8B2942;
}
HTML:
<select>
<option class="required" value="0">test1</option>
<option class="required" value="1">test2</option>
<option class="required" value="2">test3</option>
</select>
Can anyone please help or any other way to put red asterisk to my option text?
I have tried all DOCTYPE still not working.
The required notice belongs on the label of the select field, not the options. eg:
.required{color:#8B2942}
<label for="myselect"><span class="required">*</span> Title: </label>
<select id="myselect" name="myselect">
<option value="1">test1/option>
<option value="2">test2</option>
<option value="3">test3</option>
</select>