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>
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>
So I have a data-list field below where I want to also change the label colour when the field is focused. What I've done below is I can't highlight the label when field is focused; it's the field only that is highlighted.
I have the css below:
<style lang="scss">
.panel-con {
color:rgba(0,0,0,0.54);
}
.group-list{
input:focus {
border-color: #dbb100;
}
}
</style>
How can I make the labels' color the same as the fields color when the field is focused?
If your label is before your input/select in the DOM, you can't do it with just CSS alone. You'd need JS.
If your label is after your input/select in the DOM, you could do something like this. (I've created something similar to what you have shown)
.wrapper {
position: relative;
padding-top: 30px;
}
.wrapper select {
display: block;
}
.wrapper select:focus {
color: red;
}
.wrapper select:focus + label {
color: red;
}
.wrapper label {
display: block;
position: absolute;
top: 0;
left: 0;
}
<div class="wrapper">
<select name="example">
<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>
<label for="example">Test Label</label>
</div>
you need
:focus-within
.wrapper:focus-within p {
color: red;
}
<div class='wrapper'>
<input class='input' type='text'/>
<p>your text</p>
</div>
Here's a sample of what it should look like : Select box image
I get country names from a database and generate dynamic options on page. Right now, i am showing the Html code (Not the database code). I tried lots of links to change the design (CSS), but none of them work on "select". I want to be able to change padding , border, background-color, color or border-color. Can i apply modifications to all those, for "select", using css or not ?
I also want to only show the first 5 options (first 5 country names) in the dropdown list when the button is clicked, using a scrollbar.
#country option:first-child {
display: none;
}
#country {
float: left;
width: 96%;
color: #fff;
font-size: 1em;
font-family: "Calibri";
margin-left: 5px;
padding: 8px 0px;
margin-top: 16px;
border: 1px solid #00BCEA;
padding: 9px 5px;
width: 93%;
border-radius: 4px;
color: #00BCEA;
}
<select id="country">
<option value="selectOption">Select your country</option>
<option value="selectOption1">Select your country1</option>
<option value="selectOption2">Select your country2</option>
<option value="selectOption3">Select your country3</option>
<option value="selectOption4">Select your country4</option>
<option value="selectOption5">Select your country5</option>
<option value="selectOption6">Select your country6</option>
<option value="selectOption7">Select your country7</option>
</select>
I am using the same style for my dropdown box, and a textbox, which is working fine, except that they are different lengths, only by ~10px
http://jsfiddle.net/PkWVg/
I can't seem to get them the same length without using seperate classes for each. It actually seems that the dropdown icon at the end is suppose to be to the right more?
CSS:
#container {
width:500px;
}
.form-textbox, .form-dropdown {
border: 0;
outline: 0;
height: 20px;
width:100%;
padding-left: 10px;
background-color: rgb(204, 204, 204);
color: #666;
}
HTML:
<div id="container">
<select class="form-dropdown " name="turnover" />
<option value="1">Less than £49,999 per year</option>
<option value="2">£50,000 - £99,999 per year</option>
<option value="3">£100,000 - £249,999 per year</option>
<option value="4">£250,000 - £499,999 per year</option>
<option value="5">£500,000 - £999,999 per year</option>
<option value="6">£1,000,000 or more per year</option>
</select>
<br>
<p>
<input class="form-textbox ofTextbox" name="market" type="text" />
</p>
</div>
Apply box-sizing
.form-textbox, .form-dropdown{
border: 0;
outline: 0;
height: 20px;
width:100%;
padding-left: 10px;
background-color: rgb(204, 204, 204);
color: #666;
-moz-box-sizing: border-box; // Added rule
-webkit-box-sizing: border-box; // Added rule
box-sizing:border-box; // Added rule
}
Fiddle
Add this:
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
The padding-left:10px appears to be the problem. If you remove that, the fields are the same length.
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 :)