I want to stylize a <select> for the case when not "please select" is chosen.
E.g.
select{
color: gray;
}
select:not-empty{
color: blue;
}
HTML:
<select>
<option value="">Empty, please gray</option>
<option value="something">If selected, select in blue</option>
<option value="something2">If selected, select in blue</option>
</select>
so if the option value is empty -> gray
option value not empty -> blue
Codepen:
https://codepen.io/jossnaz/pen/dLxezv
what do I want?
this:
HTML5's validation can help you out here. Specifically, you need to make the select be required. Then use the :valid pseudo class to do the styling.
Keep in mind that value="" (undefined) is NOT valid. Any string IS valid so you can use this to your advantage.
Here's an example:
select {
font-size: 14px;
color: #ccc;
padding: 5px 10px;
}
select:focus {
outline: 0 none;
}
select:valid {
color: blue;
}
<select required>
<option value="">Empty value isn't valid</option>
<option value="1">Valid option</option>
<option value="2">Another valid option</option>
</select>
Related
I trying to find out which Selectors its for the background Color of Dropdown Contactform.
I used many selector but nothing works.
Contact form:
You would have to select the option tags inside the select tag. See my example below.
I have an id of #dropDown on the select tag. Then, I use #dropDown option to change the color of the text inside the option tags in the dropdown.
So in the inspect tool, get the CSS attribute of that select element and change the color of the option children.
html, body {
width: 100%;
min-height: 100%;
padding: 0;
margin: 0;
background-color: crimson;
}
#dropDown {
background-color: transparent;
color: white;
}
#dropDown option {
color: black;
}
<form action="">
<select name="" id="dropDown">
<option value="">Test 1</option>
<option value="">Test 2</option>
<option value="">Test 3</option>
</select>
</form>
I need to have a select option with the red star at the end of all option.
<div class="styleSelect">
<select class="units">
<option value="Metres">Metres*</option>
<option value="Feet">Feet*</option>
<option value="Fathoms">Fathoms*</option>
</select>
Option has to be in black color and star need to be the red color.
I have analyzed it. People recommended to add an image but that will not work on the browser other than firefox. Please help me on this.
select.units option:after{
content: '*';
color: red;
}
<div class="styleSelect">
<select multiple class="units" size="1">
<option value="Metres">Metres</option>
<option value="Feet">Feet</option>
<option value="Fathoms">Fathoms</option>
</select>
</div>
Try this:
select.units option {
background-color: #000;
color: red !important;
}
also try this.
i added class into option
<div class="styleSelect">
<select class="units">
<option class="red" value="Metres">Metres*</option>
<option value="Feet">Feet*</option>
<option value="Fathoms">Fathoms*</option>
</select>
<style>
select.units option{
background-color: #fff;
color: #000 ;
}
option.red {
background-color: #000 !important;
color: red !important;
}
</style>
I'm trying to style the selected item in a multiple select element using CSS & LESS.
Couldn't really find something about this, especially not in combination with LESS.
This is my HTML:
<label for="userGroups">Select usergroup</label>
<select name="userGroups[]" multiple="multiple" id="userGroups">
<option value="1">Root</option>
<option value="2">WebMaster</option>
</select>
And this is my CSS/LESS:
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
&[multiple] {
option:selected {
color: red;
}
}
}
I also wrote the following code, wich is working:
&:not([multiple]) {
background: url("../images/arrow.png") no-repeat 95% 50%;
}
Hope someone knows the answer for this, thanks instead :)
Quite simply, is there any way to style specific select options in Chrome/Safari?
For example, if I had:
<select class="the-select">
<option class="header">TECHNICIANS</option>
<option>Joe Smith</option>
<option>Joe White</option>
<option class="header">PRODUCERS</option>
<option>Jane Black</option>
<option>Cindy Gray</option>
</select>
Is there anyway to style specifically those options with the class "header"? Obviously in CSS, if you do this:
select.the-select option.header {
background-color:#ff9900;
}
This should work, and does in other browsers, but not Chrome/Safari. Is this just a webkit issue and are there any workarounds for this?
Thanks!
EDIT: This seems to be an OSX webkit based browser issue, as it seems to work on Windows. I neglected to mention the fact that I cannot use optgroups because we need to be able to select those options as well. I am aware that optgroups would be the ideal solution, but unfortunately that cannot be the case in this instance.
I recently came across this technique to custom style a select tag with only CSS.
HTML:
<div class="styled-select">
<select class="the-select">
<optgroup label="TECHNICIANS">
<option>Joe Smith</option>
<option>Joe White</option>
</optgroup>
<optgroup label="PRODUCERS">
<option>Jane Black</option>
<option>Cindy Gray</option>
</optgroup>
</select>
</div>
CSS:
.styled-select {
width: 342px;
height: 30px;
overflow: hidden;
background: url("/img/selectarrow.png") no-repeat right;
border: none;
opacity: 0.8;
background-color: #999999;
}
.styled-select select {
background: transparent;
width: 342px;
padding-bottom: 10px;
padding-left: 10px;
padding-top: 5px;
font-size: 16px;
border: 0;
border-radius: 0;
height: 34px;
-webkit-appearance: none;
font-weight: 200;
font-family: "lato", sans-serif;
font-size: 18px;
}
.styled-select select:focus {
outline: none;
}
Here's a fiddle: http://jsfiddle.net/eshellborn/AyDms/
And then just make sure you get a picture called 'selectarrow' for the drop-down image.
If you just want them to clearly be headers, use a tag intended for this: <optgroup>. This might also help you with applying CSS.
<select class="the-select">
<optgroup label="TECHNICIANS">
<option>Joe Smith</option>
<option>Joe White</option>
</optgroup>
<optgroup label="PRODUCERS">
<option>Jane Black</option>
<option>Cindy Gray</option>
</optgroup>
</select>
Actually you can try applying '-webkit-appearance: none;' for option.
select option {
-webkit-appearance: none;
}
select option.blue {
color: blue;
background-color: green;
}
select option.red {
color: red;
background-color: gray;
}
select option.pink {
color: pink;
background-color: yellow;
}
<select>
<option class="blue">SomeOption1</option>
<option class="red">SomeOption2</option>
<option class="pink">SomeOption3</option>
<select>
I have a select element which has several items. I want to change the color of its first item, but it seems the color only shows
when you click on the select dropdown. What I want is to change the color (like gray) when the page is loaded so users can see the first option color is different.
See the example here...
http://jsbin.com/acucan/4/
css:
select{
width: 150px;
height: 30px;
padding: 5px;
color: green;
}
select option { color: black; }
select option:first-child{
color: green;
}
html:
<select>
<option>Item1</option>
<option>Item2</option>
<option>Item3</option>
</select>
If the first item is to be used as a placeholder (empty value) and your select is required then you can use the :invalid pseudo-class to target it.
select {
-webkit-appearance: menulist-button;
color: black;
}
select:invalid {
color: green;
}
<select required>
<option value="">Item1</option>
<option value="Item2">Item2</option>
<option value="Item3">Item3</option>
</select>
What about this:
select{
width: 150px;
height: 30px;
padding: 5px;
color: green;
}
select option { color: black; }
select option:first-child{
color: green;
}
<select>
<option>one</option>
<option>two</option>
</select>
http://jsbin.com/acucan/9
For Option 1 used as the placeholder:
select:invalid { color:grey; }
All other options:
select:valid { color:black; }
Here is a way so that when you select an option, it turns black. When you change it back to the placeholder, it turns back into the placeholder color (in this case red).
http://jsfiddle.net/wFP44/166/
It requires the options to have values.
$('select').on('change', function() {
if ($(this).val()) {
return $(this).css('color', 'black');
} else {
return $(this).css('color', 'red');
}
});
select{
color: red;
}
select option { color: black; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="">Pick one...</option>
<option value="test1">Test 1</option>
<option value="test2">Test 2</option>
<option value="test3">Test 3</option>
</select>
You can do this by using CSS: JSFiddle
HTML:
<select>
<option>Text 1</option>
<option>Text 2</option>
<option>Text 3</option>
</select>
CSS:
select option:first-child { color:red; }
Or if you absolutely need to use JavaScript (not adviced for this): JSFiddle
JavaScript:
$(function() {
$("select option:first-child").addClass("highlight");
});
CSS:
.highlight { color:red; }
I really wanted this (placeholders should look the same for text boxes as select boxes!) and straight CSS wasn't working in Chrome. Here is what I did:
First make sure your select tag has a .has-prompt class.
Then initialize this class somewhere in document.ready.
# Adds a class to select boxes that have prompt currently selected.
# Allows for placeholder-like styling.
# Looks for has-prompt class on select tag.
Mess.Views.SelectPromptStyler = Backbone.View.extend
el: 'body'
initialize: ->
#$('select.has-prompt').trigger('change')
events:
'change select.has-prompt': 'changed'
changed: (e) ->
select = #$(e.currentTarget)
if select.find('option').first().is(':selected')
select.addClass('prompt-selected')
else
select.removeClass('prompt-selected')
Then in CSS:
select.prompt-selected {
color: $placeholder-color;
}
This code works on Chromium and change the color to black once an option is selected:
select {
appearance: none;
}
select:invalid {
color: green;
}
select option {
color: black;
}
It seems that the fancy way with pure css would be more expensive; let's see with ES6
CSS
select{color:#AE1250}
JS
document.querySelectorAll('select').forEach((s) => {
s.addEventListener('change',(e)=>{
s.style.color=s.value==''?'#AE1250':'#fff';});
});