i am creating a nested list with "select" "option" and "optgroup"...
Here is my code
HTML
<div class="menu-2_small">
<form name="nav-2">
<select name="SelectURL" onchange="document.location.href=document.nav-2.SelectURL.options[document.nav-2.SelectURL.selectedIndex].value">
<option value="#">Inspiration</option>
<option value="#">Coding</option>
<option id="show-further-option" value="#">Freebies
<optgroup id="further-option">
<option value="#">Textures</option>
<option value="#">Fonts</option>
<option value="#">Brushes</option>
<option value="#">Vectors</option>
<option value="#">Icons</option>
</optgroup>
</option>
<option value="#">Design</option>
<option value="#">Tutorials</option>
<option value="#">Technology</option>
</select>
</form>
</div>
And the CSS
.menu-2_small{
display:block;
width:100%;
height:35px;
background-image:url(imgs/link-bg-small.jpg);
background-repeat:no-repeat;
background-size:100% 100%;
}
.menu-2_small select{
width:70%;
background-image:url(imgs/link-bg-small.jpg);
color:white;
font-size:0.70em;
margin:6px 0 0 1%;
cursor:pointer;
}
.menu-2_small select option{background-image:url(imgs/link-bg-small.jpg);background-repeat:no-repeat;}
.menu-2_small select option:hover{font-weight:bold;}
optgroup{display:none;}
option #show-further-option:hover optgroup{display:block;}
Now the problem is that when I hover over the option with id "show-further-option", optgroup is not being displayed no matter what i try...
How can i do that?
Use 'label' attribute to display optgroup name.
<option id="show-further-option" value="#">Freebies
<optgroup id="further-option" label="further-option">
<option value="#">Textures</option>
....
Related
I am using select 2 https://select2.org/ and I am wondering how do I change the colour of selected option with the value="4". So when Mark as destroyed is selected it shows in a different colour. I tried setting class and inline css directly but both did not work.
Not working: <option value="4" class="tx-orange">Mark as destroyed</option>
Not working: <option value="4" style="color:orange;">Mark as destroyed</option>
This is how the select block looks like
<select id="scanActionOptions" class="form-control select2">
<option value="0">Verify</option>
<option value="1">Mark as active</option>
<option value="2">Mark as dispense</option>
<option value="3">Mark as stolen</option>
<option value="4">Mark as destroyed</option>
<option value="5">Mark as sample</option>
<option value="6">Mark as free sample</option>
<option value="7">Mark as locked</option>
<option value="8">Mark as exported</option>
<option value="9">Mark as checkout</option>
<option value="10">Mark as expired</option>
<option value="11">Mark as recalled</option>
<option value="12">Mark as withdrawn</option>
</select>
$(document).ready(function() {
$('.select2').select2();
});
/*selected css*/
.select2-container--default .select2-results__option--selected {
color: orange;
background:rgb(221 221 221 / 32%) !important;
}
/*hover css*/
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
background-color: orange !important;
color: white;
}
/*particular option color*/
.select2-container--default .select2-results>.select2-results__options li:nth-child(2) {
color: #fff;
background: red !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-beta.1/dist/js/select2.min.js"></script>
<select id="scanActionOptions" class="form-control select2">
<option value="0">Verify</option>
<option value="1">Mark as active</option>
<option value="2">Mark as dispense</option>
<option value="3">Mark as stolen</option>
<option value="4">Mark as destroyed</option>
<option value="5">Mark as sample</option>
<option value="6">Mark as free sample</option>
<option value="7">Mark as locked</option>
<option value="8">Mark as exported</option>
<option value="9">Mark as checkout</option>
<option value="10">Mark as expired</option>
<option value="11">Mark as recalled</option>
<option value="12">Mark as withdrawn</option>
</select>
If you need to change selected colour apply css on ".select2-container--default .select2-results__option--selected" and change hover css then apply on ".select2-container--default .select2-results__option--highlighted.select2-results__option--selectable".
If you need colour particular option like 2nd option then you can use ".select2-container--default .select2-results>.select2-results__options li:nth-child(2)" .
Select2 CSS seems getting the style from this rule-set
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
background-color: #5897fb;
color: white;
}
You might use li:nth-child(x) applied to the rule-set shown before. CSS aplied to the original select won't be visible.
I am trying to evenly space out my drop down box. I want the options to be evenly spaced out whenever the user select a drop down box. I tried using margin and this seems to work but for some reason, I can't get it to push down further enough....
<div class="subscriptionplan">
<select name="subscriptionplan">
<option value="">Choose Subscription Plan 1</option>
<option value="None">None</option>
<option value="Level 1">Level 1</option>
<option value="Level 2">Level 2</option>
<option value="Level 3">Level 3</option>
</select>
<br></br>
<select name="pricing_level1">
<option value="">Choose a price plan for Level 1</option>
<option value="None">None</option>
<option value="100">Monthly:$100</option>
<option value="800">Yearly:$800</option>
</select>
<br></br>
<select name="pricing_level2">
<option value="">Choose a price plan for Level 2</option>
<option value="None">None</option>
<option value="150">Monthly:$150</option>
<option value="1300">Yearly:$1300</option>
</select>
<br></br>
<select name="pricing_level3">
<option value="">Choose a price plan for Level 3</option>
<option value="None">None</option>
<option value="200">Monthly:$200</option>
<option value="1800">Yearly:$1800</option>
</select>
<br></br>
<button type="submit" name="submit">Sign up</button>
</form>
</div>
This is the CSS code:
div.subscriptionplan {
position: absolute;
right: 180em;
bottom: 60em;
}
div.subscriptionplan select{
margin: 180em;
}
em is not equal to px.
div.subscriptionplan {
position: absolute;
right: 180em;
bottom: 60em;
}
div.subscriptionplan select{
margin: 180em;
}
/* ------------------------*/
You did not add the context for absolute position.
assuming that you need css for spacing select boxes side by side please refer below. you can remove br tags.
div.subscriptionplan {
/* position: absolute;
right: 180em;
bottom: 60em;*/
display:block;
width:100%;
}
div.subscriptionplan select{
/* margin: 180em;*/
margin:0.5em;
display:inline-block;
max-width:33.3%;
}
The problem is I can't change the height of the drop down box in html.for (select->option) I try to apply the style in CSS. It does not works
You can not control the style of option. (see here:https://css-tricks.com/dropdown-default-styling/)
however you can change the font-size and the option will grow
select option{
font-size: 20px;
}
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
It is not possible to change height of 'option'
Only you can change the background-color and color of the 'option' values
You can change the 'select' element height.
You just need to use the height CSS attribute for the select tag.
label select {
height: 100px;
}
<label>
<select>
<option selected>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
</label>
<select style="min-height:40px;min-width:100px;">
<option value="">Select1</option>
<option value="">Select2</option>
<option value="">Select3</option>
</select>
You can style the select and option elements usign CSS like this:
select {
height: 200px;
color: red;
}
option {
color: green;
}
Notice that you have to remove the "." before select and option.
This will overwrite any select and option element.
EDIT:
You can also refer to a certain select element by giving to that element a class name, like this:
select.s1{
height: 100px;
}
select.s2{
height: 150px;
}
<select class="s1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<select class="s2">
<option value="fiat">Fiat</option>
<option value="ferrari">Ferrari</option>
<option value="alfaromeo>Alfa Romeo</option>
<option value="lancia">Lancia</option>
</select>
I have the following code and I want to hide the last option of the select box ie option - 3
select[name="test"]:not(optgroup) option:last-child {
display: none;
}
<select name="test">
<option value="one">1</option>
<optgroup label="emails">
<option value="two">2</option>
</optgroup>
<option value="three">3</option>
</select>
But the above CSS code doesn't work.
Any help is highly appreciated. Thanks in advance.
see my attempt below
select option[value=three] {
display: none;
}
<select name="test">
<option value="one">1</option>
<optgroup label="emails">
<option value="two">2</option>
</optgroup>
<option value="three">3</option>
</select>
Basically what you want is to hide the last direct option child of the select element:
select > option:last-child { display: none; }
<select name="test">
<option value="one">1</option>
<optgroup label="emails">
<option value="two">2</option>
</optgroup>
<option value="three">3</option>
</select>
Just a small edit on your CSS. :)
select[name="test"] > option:last-child { display: none;}
<select name="test">
<option value="one">1</option>
<optgroup label="emails">
<option value="two">2</option>
</optgroup>
<option value="three">3</option>
</select>
You can also use the value selector like this:
option[value="three"] {
display: none;
}
<select name="test">
<option value="one">1</option>
<optgroup label="emails">
<option value="two">2</option>
</optgroup>
<option value="three">3</option>
</select>
html,
<select id="start_time" name="start_time" class="hasTimeEntry">
<option value="00:00">00:00</option>
<option value="00:30">00:30</option>
<option value="01:00">01:00</option>
<option value="01:30">01:30</option>
<option value="02:00">02:00</option>
<option value="02:30">02:30</option>
<option value="03:00">03:00</option>
<option value="03:30">03:30</option>
<option value="04:00">04:00</option>
<option value="04:30">04:30</option>
<option value="05:00">05:00</option>
<option value="05:30">05:30</option>
<option value="06:00">06:00</option>
<option value="06:30">06:30</option>
<option value="07:00">07:00</option>
<option value="07:30">07:30</option>
<option value="08:00">08:00</option>
<option value="08:30">08:30</option>
<option value="09:00">09:00</option>
<option value="09:30">09:30</option>
<option value="10:00">10:00</option>
<option value="10:30">10:30</option>
<option value="11:00">11:00</option>
<option value="11:30">11:30</option>
<option value="12:00">12:00</option>
<option value="12:30">12:30</option>
<option value="13:00">13:00</option>
<option value="13:30">13:30</option>
<option value="14:00">14:00</option>
<option value="14:30">14:30</option>
<option value="15:00">15:00</option>
<option value="15:30">15:30</option>
<option value="16:00">16:00</option>
<option value="16:30">16:30</option>
<option value="17:00">17:00</option>
<option value="17:30">17:30</option>
<option value="18:00">18:00</option>
<option value="18:30">18:30</option>
<option value="19:00">19:00</option>
<option value="19:30">19:30</option>
<option value="20:00">20:00</option>
<option value="20:30">20:30</option>
<option value="21:00">21:00</option>
<option value="21:30">21:30</option>
<option value="22:00">22:00</option>
<option value="22:30">22:30</option>
<option value="23:00">23:00</option>
<option value="23:30">23:30</option></select>
css,
#start_time {
background: url(/images/startclock_icon_small.gif) no-repeat scroll 1px 1px;
text-indent: 20px;
border-width: 1px 1px 1px 1px;
width: 142px;
}
if i run this it shows like this,
as you can see in the pic, if i put the
background:url attributes
it shows a different design that i dont want.
i want the same design like the right textfield.
if i comment the background : url it shows fine
however, i need this img icon as a background img :(
any good idea????
========================================
fiddle demo
DEMO
=================================
still design that i don't want
Try this :-
#start_time {
background: url(/images/startclock_icon_small.gif) no-repeat scroll 1px 1px !important;
}
Your hasTimeEntry class is overriding your background property.
Put this inline style on element which isn't working.
style="border-color: #ccc !important;"