I have a dropdown menu for country selections. The color on the screen needs to be white but now the dropdown selection is also white with a white background. Is there a way to change that?
CSS:
.styled-select select {
background: url('images/dob-field-bg2.png') no-repeat;
outline: none;
width: 250px;
padding: 5px;
font: 20px bold helvetica, arial, sans-serif;
color: #fff;
border: 0;
border-radius: 0;
height: 50px;
-webkit-appearance: none;
}
HTML:
<div class="styled-select">
<select name="Country">
<option value="" selected="selected">Select Country</option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American Samoa">American Samoa</option>
<option value="Andorra">Andorra</option>
</select>
</div>
Try to add like this: DEMO
CSS:
select option{
color:#333;
}
You can add background-color for options like this: DEMO
CSS with background-color for dropdown:
select option {
color:#333;
background-color:yellow;
}
Just change the color: #fff to color: #000
Related
I have three select controls and would like them to group inside fieldset like style but without using fieldset. Like in my image,
I have following style to make text field appear like fieldset,
border-radius: 6px;
border: none;
font-weight: bold;
background: none;
box-shadow: none;
border: 2px solid #e4e4e4;
width: 100%;
padding: 25px 5px 5px 10px;
Gives me style like,
Edit:
HTML,
<div id="divPrice" class="margin-all">
<div class="editor-field">
<input data-val="true" data-val-number="The field Price must be a number." data-val-required="The Price field is required." id="Price" maxlength="6" name="Price" type="text" value="20.00" class="hasText input-validation-error" aria-required="true" aria-invalid="true" aria-describedby="Price-error">
<label for="Price">Price</label>
</div>
</div>
Ive created a jsfiddle for you: jsfiddle.net/by6rst01/1/
You can try something like this:
.fieldset {
border: 2px groove threedface;
border-top: none;
padding: 0.5em;
margin: 1em 2px;
}
.fieldset>h1 {
font: 1em normal;
margin: -1em -0.5em 0;
}
.fieldset>h1>span {
float: left;
}
.fieldset>h1:before {
border-top: 2px groove threedface;
content: ' ';
float: left;
margin: 0.5em 2px 0 -1px;
width: 0.75em;
}
.fieldset>h1:after {
border-top: 2px groove threedface;
content: ' ';
display: block;
height: 1.5em;
left: 2px;
margin: 0 1px 0 0;
overflow: hidden;
position: relative;
top: 0.5em;
}
<div class="fieldset">
<h1><span>Must Add By</span></h1>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</div>
I have added css styling to my select elements. However, as you can see below the element now has a white toggle button and a black one. How can I get rid of the black one?
.styled-select {
background: url(http://i62.tinypic.com/15xvbd5.png) no-repeat 96% 0;
height: 29px;
overflow: hidden;
width: 240px;
}
.semi-square {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
<select class="styled-select yellow semi-square" (change)="getLocations()" id="interest">
<option value="default">Select your interest</option>
<option value="movie_theater">Movie Theaters</option>
<option value="movie_rental">Movie Rental</option>
</select> within
<select class="styled-select yellow semi-square" (change)="getLocations()" id="distance">
<option value="2500" selected>2,5</option>
<option value="5000">5 </option>
<option value="10000">10</option>
<option value="20000">20</option>
</select> kilometers <br />
Add -webkit-appearance: none; to select
See this
.styled-select {
background: url(http://i62.tinypic.com/15xvbd5.png) no-repeat 96% 0;
height: 29px;
overflow: hidden;
width: 240px;
-webkit-appearance: none;
-moz-appearance: none;
}
.semi-square {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
<select class="styled-select yellow semi-square" (change)="getLocations()" id="interest">
<option value="default">Select your interest</option>
<option value="movie_theater">Movie Theaters</option>
<option value="movie_rental">Movie Rental</option>
</select> within
<select class="styled-select yellow semi-square" (change)="getLocations()" id="distance">
<option value="2500" selected>2,5</option>
<option value="5000">5 </option>
<option value="10000">10</option>
<option value="20000">20</option>
</select> kilometers <br />
I want change the default style for a select multiple html tag.
I need apply an inline-block style and align center for the options, but when i apply this styles, the options don't break to a new line.
<select name="select" id="select" multiple size="3">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">option 4</option>
<option value="5">option 5</option>
<option value="6">option 6</option>
<select/>
select {
width: 200px;
height: 200px;
text-align: center;
background: yellow;
display: block;
}
option {
width: 50px;
margin: 5px;
padding: 10px 5px;
border: 1px solid #000;
border-radius: 5px;
display: inline-block;
}
here is the code:
https://codepen.io/gpuente/pen/NXeoRN
The box 1 is the select, and the box 2 is the result that i need.
Add white-space:normal in your select
select {
width: 200px;
height: 200px;
text-align: center;
background: yellow;
display: block;
white-space: normal;
}
https://codepen.io/RACCH/pen/ypGwNq
I'm using bootstrap 4 with Angular 2 and have the following select:
<div class="form-group">
<label class="col-md-4 control-label" for="OptionExample">Select an option:</label>
<div class="col-md-4">
<select id="optionExample" name="optionExample" class="form-control" [(ngModel)]="ngmodeloptionExample"
(ngModelChange)="optionExamples()">
<option disabled [ngValue]="-1">Select an Option</option>
<option *ngFor="let option of options" [ngValue]="option">{{option.property }}</option>
</select>
</div>
</div>
Is it possible for me to style this? I tried adding some bootstrap classes, but no luck. I am open to using Typescript or javascript, but having difficulty using a library like:
https://silviomoreto.github.io/bootstrap-select/examples/
.selectWrapper {
width: 100%;
overflow: hidden;
position: relative;
border: 1px solid #bbb;
border-radius: 2px;
background:#FFFFFF url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2211%22%20height%3D%2211%22%20viewBox%3D%220%200%2011%2011%22%3E%3Cpath%20d%3D%22M4.33%208.5L0%201L8.66%201z%22%20fill%3D%22%2300AEA9%22%2F%3E%3C%2Fsvg%3E') right 13px center no-repeat;
}
.selectWrapper select {
padding: 12px 40px 12px 20px;
font-size: 18px;
line-height: 18px;
width: 100%;
border: none;
box-shadow: none;
background: transparent;
background-image: none;
-webkit-appearance: none;
outline: none;
cursor: pointer;
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: ellipsis;
}
<div class="selectWrapper">
<select>
<option>Lorem</option>
<option>Parturient</option>
<option>Euismod</option>
</select>
</div>
now you can do it with Bootstrap 4.1
<select class="custom-select">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
see docs
I have custom dropdown in my web page. The dropdown is displayed perfectly in 4 major browsers i.e. Chrome, Mozilla, IE9, Safari. However, the image of dropdown is not shown in opera. What should I do to rectify it?
This is my html.
<div style="width:172px;">
<div class="blue" style="float: left; width:100%;">
<div class="lightblueHeading" style="text-align: left;">
No. Of Guests
</div>
<div>
<div class="styled-select">
<select name="ctl00$cphMain$ddlNoOfGuest" id="cphMain_ddlNoOfGuest" style="width: 165px;">
<option value="-1">No. of Guests</option>
<option value="1">1</option>
<option selected="selected" value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
</select>
</div>
</div>
</div>
<span id="cphMain_cmpval_NoOfGuest" class="validation" style="float:left;display:none;">* - the field is required</span>
</div>
CSS
.blue {
border: 1px solid #74A4CA;
}
.lightblueHeading {
font-size: 12px;
background-color: #74A4CA;
color: white;
border: 1px solid #74A4CA;
padding-left: 4px;
}
.styled-select {
overflow: hidden;
background: url(../images/signup-dropdown_icon.png) no-repeat right;
background-color: white;
width: 100%;
background-position: 100%;
display: inline-block;
}
.styled-select select {
background: transparent;
width: 110% !important;
line-height: 1;
border: 0;
height: 34px;
-webkit-appearance: none;
-moz-appearance: none !important;
appearance: none;
font-size: 12px;
float: left;
}
Opera does not support transparent select background. Try this:
.styled-select select {
background: rgba(0,0,0,0);
background: transparent;
.
.
.