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 />
Related
I have the flora forms form and I can't get the element (located on the flo-select:before on css) to move it to the left side.
Here's what i have right now:
And here's what i want to acheive:
Here's the HTML code:
Here's a LIVE One: Live Demo
.floraforms .flo-select>select::-ms-expand {
display: none
}
.floraforms .flo-select:after,
.floraforms .flo-select:before {
content: '';
position: absolute;
pointer-events: none;
z-index: 15;
}
.floraforms .flo-select:before {
top: 2px;
right: 2px;
width: 34px;
bottom: 2px;
background: #F2F4FA;
border-left: 1px solid #d3dae7;
-webkit-border-radius: 0 1px 1px 0;
-moz-border-radius: 0 1px 1px 0;
-o-border-radius: 0 1px 1px 0;
border-radius: 0 1px 1px 0;
}
<div class="elem-group colm colm6">
<label class="field flo-select">
<select id="month" name="month">
<option value=""> Select month </option>
<option value="01">01 - Jan</option>
<option value="02">02 - Feb</option>
<option value="03">03 - Mar</option>
<option value="04">04 - Apr</option>
<option value="05">05 - May</option>
<option value="06">06 - Jun</option>
<option value="07">07 - Jul</option>
<option value="08">08 - Aug</option>
<option value="09">09 - Sep</option>
<option value="10">10 - Oct</option>
<option value="11">11 - Nov</option>
<option value="12">12 - Dec</option>
</select>
<i class="arrow double"></i>
</label>
</div>
Inside the spacing-container div, I'm setting an image to appear to the right-hand side of the options, the image is a line spacer icon. However, when I set this icon it's just a big black mark. I've tried resizing it but not got very far with it. The icons which I'm using in the two other divs are working, which display a drop-down icon.
Further, I was hoping to store the icons locally, but when I set the icons they do not come through when I set the background to find the images locally. My file structure is as follows:
CSS
--> CssImages
--> -- down-chevron.png
--> -- line-spacing.png
main.css
and I was importing them in this format in my css file.
background: transparent url("CSS/CssImages/down-cheron.png")
Unfortunately this didn't seem to work, however, upon inspecting in developer tools the images were being pulled through to the local host.
My HTML is here:
<div class="tool-bar">
<div class="options-container">
<select>
<option value = "times-new-roman">Times New Roman</option>
<option value = "arial">Arial</option>
<option value = "courier-new">Courier New</option>
<option value = "verdana">Verdana</option>
</select>
</div>
<div class="options-container font-container">
<select>
<option value = "8">8</option>
<option value = "10">10</option>
<option value = "12">12</option>
<option value = "14">14</option>
<option value="16">16</option>
<option value="18">18</option>
<option value="20">20</option>
<option value="22">22</option>
<option value="24">24</option>
</select>
</div>
<div class="options-container spacing-container">
<select>
<option value="1">1</option>
<option value="1.5">1.5</option>
<option value="2.0">2.0</option>
</select>
</div>
</div>
My Css snippet is here:
.tool-bar {
width: 100%;
height: 100%;
background-color: #a19f9f;
float: left;
display: inline;
}
.options-container {
padding: 10px;
width: 20%;
border-left: 3px solid #aaaaaa;
background-color: #ffffff;
float:left; display:inline;
}
.font-container {
width: 5%;
}
.spacing-container{
width: 6%;
}
.options-container select {
width: 100%;
font-size: 20px;
border: 0;
line-height: 1;
height: 34px;
outline: none;
background: transparent url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat center;
display: block;
margin-right: 5px;
-webkit-appearance: none;
background-position-x: 215px;
}
.font-container select {
background-position-x: 20px;
}
.spacing-container select {
background: url("https://image.flaticon.com/icons/svg/1827/1827633.svg") 0 0;
background-position-x: 0;
}
I appreciate your time and your advice with the matter.
Thank you,
The icon you are using is too big, that's why it is not visible. So, you have to use background-size property.
.tool-bar {
width: 100%;
height: 100%;
background-color: #a19f9f;
float: left;
display: inline;
}
.options-container {
padding: 10px;
width: 30%;
border-left: 3px solid #aaaaaa;
background-color: #ffffff;
float:left; display:inline;
}
.font-container {
width: 10%;
}
.spacing-container{
width: 10%;
}
.options-container select {
width: 100%;
font-size: 20px;
border: 0;
line-height: 1;
height: 34px;
outline: none;
background: transparent url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat center right;
display: block;
margin-right: 5px;
-webkit-appearance: none;
}
.font-container select {
background-position-x: 100%;
}
.spacing-container select {
background: url("https://image.flaticon.com/icons/svg/1827/1827633.svg") no-repeat center;
background-position-x: 100%;
background-size: 20px;
}
<div class="tool-bar">
<div class="options-container">
<select>
<option value = "times-new-roman">Times New Roman</option>
<option value = "arial">Arial</option>
<option value = "courier-new">Courier New</option>
<option value = "verdana">Verdana</option>
</select>
</div>
<div class="options-container font-container">
<select>
<option value = "8">8</option>
<option value = "10">10</option>
<option value = "12">12</option>
<option value = "14">14</option>
<option value="16">16</option>
<option value="18">18</option>
<option value="20">20</option>
<option value="22">22</option>
<option value="24">24</option>
</select>
</div>
<div class="options-container spacing-container">
<select>
<option value="1">1</option>
<option value="1.5">1.5</option>
<option value="2.0">2.0</option>
</select>
</div>
</div>
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;
.
.
.