This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
Styling select options
I am wondering if it is possible to apply two styles within an option element? For example, in my code below, I would like my product name to be of style color:black; while the price be of another style color:red; font-weight:bold;. I have tried wrapping my price around span.price but that did not work.
<select>
<option>Apple <span class="price">$1.00</span></option>
<option>Banana <span class="price">$2.50</span></option>
<option>Cherry <span class="price">$1.50</span></option>
</select>
option styles are styled in a way native to the platform. You cannot do what you desire without changing the markup (and/or using JavaScript)
Try this CSS in the of your HTML document, or in your external stylesheet (strip out the <style> tags if you put it in an external stylesheet):
<style type="text/css">
select option { color: black; }
select option span.price { color: red; font-weight:bold; }
</style>
By doing this, you are basically saying "All options in my select should have black text color". Then, you're overriding that by saying "Any spans with a class of "price" inside an option inside my select should have a red text color."
Related
This question already has answers here:
How to create a css rule for all elements except one class?
(3 answers)
Closed 8 months ago.
How do I select all but one instance of an element?
for example, my link or <a> elements have a particular color, but there's this one a element I don't want the color to to apply.
I want the link element to have the same color as the remaining text
There is a :not selector in CSS. This will apply styles to everything, except elements that the not selector will target.
So, you could style the colors of all anchor tags except ones that you put a specific class on like:
a:not(.dontBeRed) {
color: red;
}
You can also target exceptions other ways. Lets say you have a few custom color utility classes, you could ignore elements that have any class with a certain prefix.
This will style all anchors red unless they have a class that starts with u-color on them.
a:not([class*='u-color']) {
color: red;
}
.u-color--green {
color: green;
}
.u-color--blue {
color: blue;
}
This question already has answers here:
How to affect other elements when one element is hovered
(9 answers)
Closed 2 years ago.
I want to ask if there is a way in CSS to style an element on a link hover.
What I mean is that for example on a link hover change the body background color to blue.
I tried to search but I didn't find anything.
Yes it is possible to use "hover".
For example :
a: hover {
background-color:blue;
text-decoration: none;
}
However, I think it's best to share your code so that you can help you.
You can do so if the link elements preceeds or is the parent of the element whose background you want to change
UPDATE
If your html structure looks like this
<a class="my_link" href="example.html">My link</a>
<div class="my_element"></div>
In the above code, the a tag with class my_link proceeds the element which we want to change its background. In this type of scenario, you can use the CSS code below. Notice the ~ symbol...
Then in CSS
.my_link:hover ~ .my_element{
background: red;
}
If your html structure looks like what i have below, where the a tag is the parent of the element whose background we want to change.
<a class="my_link" href="example.html">My link
<div class="my_element"></div>
</a>
The CSS code below would do the trick. Notice the ~ symbol is omitted
.my_link:hover .my_element{
background: red;
}
This question already has answers here:
How do I style a <select> dropdown with only CSS?
(25 answers)
Closed 6 years ago.
So i am trying to customize a full dropbox (Country Selector) instead of the regular look, I want to add a diferent design to it.
Regular design
[
The Design I want
The first image is the default version with color adjustments, its the version that is working on the website, I want to make the design look like the 2nd picture i've uploaded.
The second version is what I got on photoshop, how i do customize my <select> to the 2nd picture? here is the code i got on css, I tried to use ::webkit and it didn't work.
CSS
.paistofill option {
background-color:#a5e4c9;
font-weight: normal;
white-space: pre;
min-height: 0.0em;
padding: 0px 0px 0px;
border-radius: 50px;
}
.paistofill select{
background-color: white;
color:#a5e4c9;
border-radius: 50px;
}
The select customization has no effect on the element, what do I need to do?
For this you need to use a plugin (or make it yourself) like https://select2.github.io/. You can't really customise the dropdown of the select reliably in every browser. These plugins usually replace and make div elements of the select (and the dropdown) which acts like the normal select. Then you can easily modify these elements with css.
This question already has answers here:
CSS :selected pseudo class similar to :checked, but for <option> elements
(4 answers)
Closed 8 years ago.
I have an issue about selecting element inside the dropdown. Here is the fiddle: http://jsfiddle.net/H656H/
<select id="razred" name="razred">
<option hidden selected><?php echo $razred; ?></option>
<option>1.A</option>
<option>1.B</option>
<option>1.C</option>
<option>1.Č</option>
<option>1.D</option>
<option>1.E</option>
<option>2.A</option>
<option>2.B</option>
<option>2.C</option>
<option>2.Č</option>
<option>2.D</option>
<option>2.E</option>
<option>3.A</option>
<option>3.B</option>
<option>3.C</option>
<option>3.Č</option>
<option>3.D</option>
<option>3.E</option>
<option>4.A</option>
<option>4.B</option>
<option>4.C</option>
<option>4.Č</option>
<option>4.D</option>
<option>4.E</option>
</select><br />
So, I want to style the element after the user clicks it. So, only when user select an his selection receives a styling.
I think there has to be some kind of CSS pseudo-selector for this selected element inside dropdown.
Are there any CSS selectors for that?
Thank you all!
There is no pseudo selector for marking select boxes the way you imagine. So the answer to your original question is No :(
But if you dont mind using a tiny bit of JavaScript then you can emulate the feature you desire. You can add a class to the select box's onchange method. Ideally this should be done from the bottom of the page inside a script tag. I m doing it inline only as a demo:
<select id="razred" name="razred" onchange='this.className="visited"'>
And then you could just define the custom class the way you want
.visited {
color: #f00;
-webkit-appearance: none; /*required for webkit based browsers*/
}
JSFiddle: http://jsfiddle.net/9K5h2/1
Edit: removed incorrect part of answer.
The answer to your actual question regarding css:
From a previous question
#razred option:checked { color: red; }
The focus selector will do something that's close to what you are looking for
#razred:focus{
color: blue;
}
Updated fiddle
Is there any secret behind editing a option tag with css? I just can't solve this issue
<option> FirstName <span class = "foo">SecondName</span> </option>
.foo{
color:#666666;
}
What am I missing?
<option> elements cannot contain anything other than text. So no, you can't apply a style to a section of their content.
Just don't use a <select>, or don't bother about styling. From your use case, it doesn't really look suitable anyway. It'd be better just to type the name, wouldn't it?
I know this question is old, but there are some new developments in the world of CSS!
color property on select will now set color of option(s) text (including selected), while adding / over-riding color to select option.
CSS:
select {
color: white; /* color of selected option */
}
select option {
color: black; /* color of other options */
}