I have this mark us
<div class="styled-offer">
<select style="font-size:13px;" class="select offer-select" name="type">
<option selected="" class="selected" value="1">Sell Offers</option>
<option value="2">Buy Offers</option>
<option value="3">Products</option>
<option value="4">Companies</option>
<option value="5">Business Directory</option>
<option value="6">Classified</option>
</select>
</div>
Now here you can see the first option which is selected is Sell Offers. Now I want the selected option should be in red color and all rest of options should be in black color. Just like this site. Here you can see the option products is by default blue in color and when you click on the options they are black in colors. So I just want this. I want to make it in css. Not in jQuery. So can someone kindly tell me how to do this? Any help and suggestions will be really appreciable.
Update
Sorry..I can't change my markup So kindly guide me in this markup...
Hey thanks all for all of your answers but finally I got the solution. It was damn easy...
My markup was like this
<div class="styled-offer">
<select style="font-size:13px;" class="select offer-select" name="type">
<option selected="" class="selected" value="1">Sell Offers</option>
<option value="2">Buy Offers</option>
<option value="3">Products</option>
<option value="4">Companies</option>
<option value="5">Business Directory</option>
<option value="6">Classified</option>
</select>
</div>
Now my css will be like this..
<style type="text/css">
.styled-offer select.offer-select {
color: #F00;
}
.styled-offer select.offer-select option {
color: #333;
}
</style>
Try to apply your CSS class "selected" to a span, rather to the option itself:
<option selected="" value="1"><span class="selected" >Sell Offers</span></option>
http://tympanus.net/Tutorials/CustomDropDownListStyling/index.html
if u are using default drop down it is not possible try custom drop down.try this link it might helpful.
Related
I have a requirement in my project to give a particular type of styling to the default i.e. placeholder value of a select tag when the select is "disabled".
I am aware that it can be given using select:invalid but I find it working only when select is "required" and but I want a solution for the below scenario.
<select disabled>
<option disabled value="" selected>- please choose -</option>
<option value="1">Apple</option>
<option value="2">Banana</option>
</select>
Note:
The requirement I have to resolve is in the select box the placeholder option i.e. the disabled option "-please choose-" has to be in italics and the rest of the options have to be in normal font style. Even when the select box is expanded. so you see in the "required state" I am able to give them different styles using :invalid selector(which doesn't works when the select is in "disabled state"), but in the disabled state, I am able to give just one type i..e italics or normal, if an option is selected and the select box is disabled/made non-editable following some condition, the option is looking like it is a placeholder because of the italics style.
This should work :
select:disabled {
background: red; /* For exemple */
}
I tried my best understanding your problem statement and hence tried to cover the explanatory scenarios which might work for you , please go through the developer comments in both the html and css files.
select:invalid,
select:disabled{
border-color: red;
}
/*
these are the default values which select disabled attribute adds to the CSS of select box by default
opacity: 0.7;
border-color: rgba(118, 118, 118, 0.3);
*/
<!--Scenario 1: Where you had only the required attribute and wanted to validate it by say border red-->
<select required>
<option disabled value="" selected>- please choose -</option>
<option value="1">Apple</option>
<option value="2">Banana</option>
</select>
<!--Scenario 2: where your selectbox is disabled yet shows a required type error-->
<select disabled>
<option disabled value="" selected>- please choose -</option>
<option value="1">Apple</option>
<option value="2">Banana</option>
</select>
Please use this CSS approach in all condition of select menu :-
select{color:pink;}
select option{color:blue;}
select option[disabled]{color: red; font-style:italic;}
select:disabled{color: yellow; font-style:italic;}
<select disabled>
<option disabled value="" selected>- please choose -</option>
<option value="1">Apple</option>
<option value="2">Banana</option>
</select>
<select>
<option disabled value="" selected>- please choose -</option>
<option value="1">Apple</option>
<option value="2">Banana</option>
</select>
try this It's working for me
<select class="form-control">
<option value="" readonly="true" hidden="true" selected>Select your option</option>
<option value="1">Something</option>
<option value="2">Something else</option>
<option value="3">Another choice</option>
</select>
I have a problem here.
There's a select element with some options, and I wonder if it's possible to change the dropdown's background, width and font.
The sample markup is:
<form action="">
<span>Show</span>
<select name="cars" id="indicator-filter-options">
<option value="all" selected>Cars</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="bmw">BMW</option>
<option value="audi">Audi</option>
</select>
I didn't paste my css because it's written in SASS using variables.
Is it possible to achieve a similarly looking background and hover effect as in here:
The dropdown design I'm trying to achieve is HERE
You cannot style dropdown options like that unless you use unordered list. The demo below might give you an idea.
<ul><li>Option One</li></ul>
View Demo
Here is the code I am having issues with:
<select name="webmenu" id="filter_option" style="width: 175px; " onchange="searchTree($(this).val());">
<option value="">--View All--</option>
<option value="Tree">Tree</option>
<option value="Dog Approval">Dog Approval</option>
<option value="Cat">Cat</option>
<option value="Sky">Sky</option>
I have an issue with the dropdown in that when I select this: <option value="">--View All--</option> in chrome the list does not load all default values when this option is selected.
When I go into chrome inspector and look at the line: <option value="">--View All--</option> the option value looks like this: <option>--View All--</option>
Why is it stripping out the value="" part of the code?
without the code ot link to that site I cannot guess what exactly is happening at your side.
but answering the question from the title…
you can only select multiple options if the attribute multiple is present in the tag select. then to make an option tag selected it needs the attribute selected.
so to select all options, all option tags need an attribute selected.
read up: select, multiple, option
<!doctype html>
<html>
<head><title></title></head>
<body>
<select size="5" multiple>
<option selected value="1">1</option>
<option selected value="2">2</option>
<option selected value="3">3</option>
<option selected value="4">4</option>
<option selected value="5">5</option>
</select>
</body></html>
if you can maybe add your problem to the above playground and a solution might be found through that.
Is there a way to add an additional 'submenu' to a dropdown list on a contact form? So it would technically work like a drop-down navigation.
Below is the drop-down list for my contact form. And i've been asked to see if I can add additional options to lets say, Existing Partner. So when they hover over that item it expands to other options.
<label for="hear">How did you hear about us? </label>
<select class="contact-drop-down" name="hear" id="hear">
<option>Click to choose</option>
<option value="1">Existing Partner</option>
<option value="2">Word of mouth</option>
<option value="3">Brochure</option>
<option value="4">Email mailshot</option>
<option value="5">Google</option>
<option value="6">Yahoo</option>
<option value="7">Bing</option>
<option value="8">Other search engine</option>
<option value="9">Other</option>
</select>
You can't expand on hover with the standard select within HTML, but you can with either Javascript or HTML5 and CSS3.
This site has a list of 30 examples of HTML5 navigation menus and this site has a large selection of Javascript and JQuery examples.
Hopefully one of these might help you get what you want.
You can use optgroup tag for this.
<select>
<optgroup label="Existing Partners">
<option value="existing_partner_a">Partner A</option>
<option value="existing_partner_b">Partner B</option>
<option value="existing_partner_others">Others</option>
</optgroup>
</select>
No you cannot add sub menu to actual dropdown control. But you may find many custom controls.
Check out this
Saurabh Goyal above suggested to use . I also thought of suggesting the same. But is used for categorization & I dont think thats what you want.
Try optgroup for this .for example
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
Is it possible to dynamicaly resize the visible options in select tag in forms? I have the example:
<select size="1">
<option value='1'>1
<option selected value='2'>2
<option value='3'>3
<option value='4'>4
</select>
I would like to have visible all options (to setup size dynamically with css) when design page for printing. And also to see selected option(s) in another design (color, bold ...). For resize I tried:
select{
size:4;
}
but it doesn't work. I need a working solution at least for FF, IE, Safari ...
Do have any idea?
Thanks in advance!
You can use this way:
<select size="1" size="4">
<option value='1'>1</option>
<option selected value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
</select>
And don't forget to close the </option>