Adding padding to drop down select active item - html

I'm trying to drop down items that are active, however it doesn't seem to be possible. They want me to move
to this:
so that there is some extra padding on the left. However I canno't seem to target the active state.
html:
<select class="input-select gender-dropdown" id="dwfrm_profile_customer_customergender" name="dwfrm_profile_customer_customergender" style="-webkit-appearance: none;">
<option class="select-option" label="Male" value="1">Male</option>
<option class="select-option" label="Female" value="2">Female</option>
</select>
I found that removiing the -webkit-appearance: none makes it space properly but it also removes the bottom border

Use padding, like this
.input-select {
padding: 6px 24px 6px 12px;
font-size: 16px;
}
<select class="input-select gender-dropdown" id="dwfrm_profile_customer_customergender" name="dwfrm_profile_customer_customergender" style="-webkit-appearance: none;">
<option class="select-option" label="Male" value="1"> Male</option>
<option class="select-option" label="Female" value="2"> Female</option>
</select>

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>

Html 5 Select List Option change background color on hover in chrome

Tried a lot to change the background color of select option on hover but unable to do so please help me to find the solution.
select.rangs option:hover {
box-shadow: 0 0 10px 100px #ffea00 inset;}
option.rang:hover {
background: #ffea00 !important;}
<select id="order" name="order" title="order" class="form-control form-login__input-field label-error rangs">
<option class="rang" value="">Sort By</option>
<option class="rang" value="popular">Most popular</option>
<option class="rang" value="register_desc">Oldest First</option>
<option class="rang" value="register_asc">Newest First</option>
I want the background color to be changed on hover in chrome
You cannot change the background of the <option>, you can't set script or style inside option element. This is used to show only text inside option element no matter what text , style or scripts
The main property of option element is value that's why there is no need to add CSS on text inside <option>
You could only apply CSS on <select>:
select {
background: #ffea00;
}
Following code will help you. Run Code Snippet.
.rang:hover { background: #ffea00 !important;}
<select id="order" name="order" title="order" class="form-control form-login__input-field label-error rangs">
<option class="rang" value="">Sort By</option>
<option class="rang" value="popular">Most popular</option>
<option class="rang" value="register_desc">Oldest First</option>
<option class="rang" value="register_asc">Newest First</option>
</select>

Placing DIV in form, can't set minimum width and height

I have the following html snippet:
<form name="foo">
<fieldset>
<legend>Legend Here</legend>
<label for="the_date">Date: </label><input type="text" name="the_date" id="the_date">
<select class="show_when_needed" id="event_state">
<option value="-1" selected="selected">N/A</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
</select>
<div class="foobar" style="display: inline; border: 1px black; min-width: 20px; min-height: 15px; background: blue;"></div>
<button type="button" name="go_next" id="go_next">Go!</button>
</fieldset>
<hr />
<button type="button" id="save_object">Save Object</button>
</form>
I am trying to have the div show inline, and set a minimum width (to force it to show on screen).
The HTML above is not achieving that goal. How do I correct it so that the div appears alongside the select option control?
[[Additional Info]]
I have tried this on the latest versions of FF and Chrome - both fail to display correctly.
You need to give the element a display: inline-block, you can't set width or height of an inline element because it behaves just like a <span> or a <strong> would, taking only the space it needs.
Take a look at this updated snippet with display: inline-block
change from display: inline; to display: block;.
<form name="foo">
<fieldset>
<legend>Legend Here</legend>
<label for="the_date">Date: </label><input type="text" name="the_date" id="the_date">
<select class="show_when_needed" id="event_state">
<option value="-1" selected="selected">N/A</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
</select>
<div class="foobar" style="display: block; border: 1px black; min-width: 20px; min-height: 15px; background: blue;"></div>
<button type="button" name="go_next" id="go_next">Go!</button>
</fieldset>
<hr />
<button type="button" id="save_object">Save Object</button>
</form>

Stylize select drop down tag

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

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