Stylize select drop down tag - html

I'm styling a select tag and I wonder if i can take the space on the right, where are the arrows
http://codepen.io/anon/pen/Pqwpdm
<header class="navbar">
<div class="navbar__container">
<select class="navbar__select">
<option class="navbar__option">Janeiro, 2015</option>
<option class="navbar__option">Fevereiro, 2015</option>
<option class="navbar__option">Março, 2015</option>
<option class="navbar__option">Abril, 2015</option>
<option class="navbar__option">Maio, 2015</option>
<option class="navbar__option">Junho, 2015</option>
<option class="navbar__option">Julho, 2015</option>
<option class="navbar__option">Agosto, 2015</option>
<option class="navbar__option">Setembro, 2015</option>
<option class="navbar__option">Outubro, 2015</option>
<option class="navbar__option">Novembro, 2015</option>
<option class="navbar__option">Dezembro, 2015</option>
</select>
</div>
</header>
.navbar__select {
float: right;
background: #C9D3DD;
font-size: 17px;
border: 0;
border-radius: 0;
-webkit-appearance: none;
padding: 5px;
}
Thanks! :).

This question has already been asked.
To recap:
Use -moz-appearance: none to disable the dropdown arrow in Firefox
Use -webkit-appearance: none to disable the dropdown arrow in Webkit browsers (such as Google Chrome)
Set display: none on the psudo class available for the dropdown arrow in Internet Explorer: ::-ms-expand

Related

How to apply background color to only selected option in select tag

I can't set background-color of a selected option in a drop-down list. My working is:
<select name="Occupancy Status" class="form-control form-control-sm">
<option style="background-color:#333333" selected>Select your Occupany Status</option>
<option>bla bla</option>
<option>bla bla</option>
<option>bla bla</option>
</select>
Is there a way to achieve desired output? Thank you.
Is this what you are looking for? It isn't polished at all just wanted to see if this is the basic behavior that you're describing that you can't figure out.
.form {
height: 50vh;
width: 50vw;
background: #333;
color: #fff;
margin: 0 auto;
padding: 2rem;
}
.field-select {
border-radius: 5px;
background-color: transparent;
border-color: rgba(255, 255, 255, 0.25);
color: #fff;
}
.field-select > option {
color: initial !important;
}
<div class="form">
<div class="field">
<label>What is your house type? <span>(Required)</span></label>
<div>
<select class="field-select" aria-required="true" aria-invalid="false">
<option value="" selected="selected" class="field-placeholder">Select</option>
<option value="Detached House">Detached House</option>
<option value="Semi-Detached House">Semi-Detached House</option>
<option value="Mid-Terrace House">Mid-Terrace House</option>
<option value="End-Terrace House">End-Terrace House</option>
<option value="Detached Bungalow">Detached Bungalow</option>
<option value="Semi-Detached Bungalow">Semi-Detached Bungalow</option>
<option value="Flat">Flat</option>
<option value="Other">Other</option>
</select>
</div>
</div>
</div>
Hit "Run code snippet" above, or check out on my CodePen.
The :checked pseudo-class in CSS initially applies to such elements that have the HTML4 selected and checked attributes. This change the style of selected option from dropdown list. Also if you want to default the styling to unselected options you can just use :not() property.
option:not(:checked) {
/*Your Styling Here*/
}
Here's a Working code:
option:checked {
background-color: #333;
color: #fff;
}
<select name="Occupancy Status" class="form-control form-control-sm">
<option selected>Select your Occupany Status</option>
<option>bla bla</option>
<option>bla bla</option>
<option>bla bla</option>
</select>

Change color of a particular option under select tag

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.

how to evenly space out drop down box?

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%;
}

Remove arrows from form element select in Bootstrap 3

I would like to remove the up/down arrows that show up next to the clock icon on right. Here is the image:
Here is the HTML:
<div class="form-group">
<label class="control-label">Date:</label>
<div class="right-inner-addon ">
<i class="glyphicon glyphicon-time"></i>
<select class="form-control input-lg">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
</select>
</div>
</div>
After applying the suggest css change below this is the result:
Try this using the appearance property:
The appearance property allows you to make an element look like a standard user interface element.
select.form-control {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}

border around drop down list

Can i somehow remove this dashed border in drop down list. Every time i click on drop down list i get this dashed border. Example is in image.
edit:
css:
option {
height: 20px;
padding: 7px 0 5px 3px;
outline: none;
border: none;
}
html:
<select onchange="window.open(this.options[this.selectedIndex].value,'_top')">
<option value="">Razvrsti restavracije po</option>
<option value="#">Odrto test</option>
<option value="#">Odrto test</option>
<option value="#">Odrto test</option>
<option value="#">Odrto test</option>
<option value="#">Odrto test</option>
</select>
I think the border is used by some people who prefer to navigate using their keyboard. So it might not be a good idea to remove it.
I don't think it is possible with CSS. What is known is that dashed border has the same color as text, so if you set the text-color same as your background it will "disappear" but your text will too:
Maybe you can play with some javascript:
onmouseover="this.style.color='#DFF1FA'" onmouseout="this.style.color='#000000'"
Or add this at your onchange att: this.blur()
<select onchange="window.open(this.options[this.selectedIndex].value,'_top'); this.blur()">
<option value="" style="color:black">Razvrsti restavracije po</option>
<option value="#">Odrto test</option>
<option value="#">Odrto test</option>
<option value="#">Odrto test</option>
<option value="#">Odrto test</option>
<option value="#">Odrto test</option>
</select>
With it the dashed outline will disappear after choosing an option.
You can do even more...
JavaScript rulez!
You can disable such borders using the css outline property:
outline: none;