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>
Related
I have tried changing the select option's items background color when the user hover over it. However, I couldn't find a way to fix the problem. My Code
<label>Blood Group</label>
<select className="custom-select form-control rounded-pill form-input-background" value={bloodGroup} onChange={(e) => setBloodGroup(e.target.value)}>
<option value='A+'>A+</option>
<option value='A-'>A-</option>
<option value='B+'>B+</option>
<option value='B-'>B-</option>
<option value='O+'>O+</option>
<option value='O-'>O-</option>
<option value='AB+'>AB+</option>
<option value='AB-'>AB-</option>
</select>
My CSS
.form-input-background{
background-color: #E6E6E6!important;
}
.custom-select option {
background: #E6E6E6;
border-radius: 1em!important;
}
I am trying to set the color of just the first item in the dropdown to be a different color even when the dropdown is closed.
<label for="labelCountry">Country</label>
<select name="country" class="form-control" id="country" onchange="stateMenu(this.value);">
<option style="color:#AFBAC7 !important;" value="" selected>Select a Country</option>
<option value="US">United States</option>
<option value="CA">Canada</option>
<option value="In">India</option>
<option value="UK">United Kingdom</option>
<option value="FR">France</option>
<option value="CH">China</option>
<option value="JA">Japan</option>
<option value="GE">Germany</option>
<option value="AU">Australia</option>
<option value="RU">Russia</option>
<option value="CA">Canada</option>
<option value="PA">Pakistan</option>
<option value="IT">Italy</option>
<option value="SP">Spain</option>
<option value="SK">South Korea</option>
<option value="PH">Philippines</option>
<option value="EN">England</option>
<option value="EG">Egypt</option>
<option value="SI">Singapore</option>
<option value="GR">Greece</option>
<option value="BR">Brazil</option>
</select>
One way to do this without JavaScript is to make the select required and style it up as gray when invalid.
However, note that if no option is selected your <form> will not validate, so this is not good if you use it on a select that's not actually required and you need the form to validate.
select:invalid,
select option:first-child {
color: #999;
}
select:invalid option {
color: black;
}
select option:first-child {
color: #999;
}
<select required>
<option value="">Please select an option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
Although I really like CSS only solutions, in this particular case it feels more correct to just use a trivial check onchange and set color of the <select> by applying/removing a class:
function onChangeHandler() {
var select = document.getElementById('theSelect');
select.classList[select.value === '' ? 'add':'remove']('empty');
}
select.empty, select option:first-child {
color: #999;
}
select, .empty option:not(:first-child) {
color: black;
}
<select onchange="onChangeHandler()" id="theSelect" class="empty">
<option value="">Please select an option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
And this would be the jQuery version:
$('#theSelect')
.on('change', function(){
$(this)[
$(this).val() === '' ? 'addClass':'removeClass'
]('empty');
})
select.empty, select option:first-child {
color: #999;
}
select, .empty option:not(:first-child) {
color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="theSelect" class="empty">
<option value="">Please select an option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
Maybe its the disabled="disabled" you're trying to achieve? If you add this to the first option, by default this changes the colour to grey.
If I understand you correctly;this is simple via jquery . . . :D
1) adding this script in document's Ready :
$(function () {
// first run
$("select").each(function () {
checkSelect($(this));
});
// after change
$(document).on("change", "select", function () {
checkSelect($(this));
});
function checkSelect($el) {
$el.find("option:selected").index() == 0 ? $el.addClass("placeholder") : $el.removeClass("placeholder");
}
})
2) adding style into your page:
select.placeholder,
select.placeholder option:first-child {
color: #AFBAC7 !important;
}
select option {
color: #333;
}
https://jsfiddle.net/jj89198103/yw6xe1kv/
I think this will work as a pure CSS solution (although I'm not sure if you really need to add the !important part but that will depend on your project):
select:not(:-internal-list-box) {
color: #AFBAC7 !important;
}
option {
color: black !important;
}
I made a fiddle HERE.
You can read about the :not css selector HERE.
Also, you may want to add additional classes to these elements to make the styling unique to this dropdown menu.
I would like to change the font color of an <option> with the attribute disabled.
I have tried this
option:disabled { color: red }
and this
option[disabled] { color: red }
Both work but the color only gets red when you CLICK on the select field. By default it is black. How can I change it?
Here is an example: http://jsfiddle.net/y0g0stbb/
It can't be both selected and disabled.
option:disabled {
color: red;
}
<select>
<option selected>Choose something</option>
<option disabled>1</option>
<option>2</option>
<option>3</option>
</select>
If you want to disable the select, instead of the option you need to moved disabled to the select tag
select:disabled {
color: red;
}
<select disabled>
<option selected>Choose something</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
The color has to be applied to the select element, not the option. So, you can do this:
You can use required and assign empty value to the first option:
<select required>
<option value="" disabled>0</option>
<option value="1">1</option>
</select>
css:
select:invalid { color: red; }
If you do this, when the option with empty value is selected, the select element will be invalid, and so the above css class will trigger.
Solved this thanks to the answer to this post: Changing the color of a <select> depending on its value - CSS only(?)
Try this:
CSS:
select{
color:red;
}
option{
color:black;
}
try this, hope it will work:
in html:
<select>
<option value="">Choose something</option>
<option disabled="disabled" value="" class="red">1</option>
<option disabled="disabled" value="" class="red">2</option>
<option disabled="disabled" value="" class="red">3</option>
</select>
in CSS:
select :disabled.red{
color: red;
}
With a little bit of Javascript you can do something like this if there are no selected valid option:
<select class="">[options]</select>
And if there a selected valid option you simple put some class through javascript in the select element:
<select class="selected">[options]</select>
And then in your CSS:
select{
color: [not selected color];
}
select.selected{
color: [selected color];
}
I'm trying to change color of selection in select option.
I was trying to do this:
option::selection {background: #ccc;}
option::-moz-selection {background: #ccc;}
option::-webkit-selection {background: #ccc; color:#fff;}
But it doesn't work. This works only for simple text, not to option.
Is there any way to change color of selection?
I dont need to change background of selected option. I need to change color of selection.
try this one maybe it will be helpful for you.
select{
margin:40px;
background: yellow;
color:#000;
text-shadow:0 1px 0 rgba(0,0,0,0.4);
}
option:not(:checked) {
background-color: #FFF;
}
HTML
<select>
<option val="">Select Option</option>
<option val="1">Option 1</option>
<option val="2">Option 2</option>
<option val="3">Option 3</option>
<option val="4">Option 4</option>
</select>
Demo JsFiddle: https://jsfiddle.net/hamzanisar/yfg8vdme/
Hope this is what you expected.
function ChangedSelection()
{
var x = document.getElementById("mySelect").selectedIndex;
var color =document.getElementsByTagName("option")[x].value;
var y = document.getElementById("mySelect");
y.style.color=color;
}
<select id="mySelect" onchange="ChangedSelection()" style="Color:red;">
<option value="red" selected="selected">Red</option>
<option value="blue">Blue</option>
<option value="Green">Green</option>
<option value="Yellow">Yellow</option>
</select>
try this
http://jsfiddle.net/zNTqm/287/
JAVASCRIPT
$('.mySelect').change(function () {
$(this).find('option').css('background-color', 'transparent');
$(this).find('option:selected').css('background-color', '#cccccc');
}).trigger('change');
HTML
<select class="mySelect">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
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>