I'm trying to get my dropdown button to look like this one:
https://www.progressive.com/auto/
And can't workout how to get the arrow looking like that on the form field. Can anyone help or suggest where to start?
Just to confirm I am only looking for the button itself, not what happens after it is clicked.
jsfiddle:
https://jsfiddle.net/6e4px6La/1/
<label class="select-label">
<select id="Type" class="size-select" name="customer_type">
<option value="" disabled selected>Please Select</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
</label>
CSS:
select {
background-color: #fff;
border-color: #979797;
border-style: solid;
border-width: 1px;
width: 250px;
margin-left: 10px;
height: 50px;
}
Thanks in advance!
You need to add the following code to your CSS
.selectParent select {
border-color: #979797;
border-style: solid;
border-width: 1px;
width: 250px;
margin-left: 10px;
height: 50px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url("IMAGE_URL") no-repeat 235px center #fff;
}
Replace the IMAGE_URL with the source of the image you want to put as the dropdown arrow.
Here is the JSFiddle with an example for the same
Related
I'm trying to change the background color on hover in select, I tried many ways and It wont change.Really appreciate If you can help,
.selector {
background-color: #252525;
color: #fff;
border: none;
border: 1px solid #595E57;
padding: 5px;
width: 150px;
}
.selector option:hover{
background-color: #1BA1E2 !important;
}
<select name="" class="selector">
<option value="">Select</option>
<option value="">Select</option>
</select>
.selector {
background-color: #252525;
color: #fff;
border: none;
border: 1px solid #595E57;
padding: 5px;
width: 150px;
overflow:hidden;
}
.selector option{
padding:5px;
}
.selector option:hover{
background-color: #1BA1E2 !important;
}
<select onfocus='this.size=10;' onchange='this.size=1; this.blur();' name="" class="selector">
<option value="">Select1</option>
<option value="">Select2</option>
<option value="">Select3</option>
<option value="">Select4</option>
</select>
Form elements are rendered by the OS and not the browser, so the CSS isn't always (or even 'is rarely') applied. There are ways to change the highlight color in Firefox, by adding a box-shadow to the CSS for option:hover, but this is browser-specific.
Try something like box-shadow: 0 0 10px 10px #1BA1E2 inset;
At the end it's not worth it. Think on mobile first. On iOS the options will be rendered in a very own way anyway. There are no colors.
Using HTML and CSS, how can I make a dropdown menu which, without being hovered over or clicked, shows two items, namely the unselectable default (title) and the first selectable item?
At the moment all I have got this, which shows the title item only:
HTML
<select class="select-box" id="form" onChange="window.location.href=this.value">
<option value="">Select</option>
<option value="http://foobar.com/1.html">1</option>
<option value="http://foobar.com/2.html">2</option>
<option value="http://foobar.com/3.html">3</option>
<option value="http://foobar.com/4.html">4</option>
</select>
CSS
.select-box {border:1px solid #000; height:18px; text-align: center; }
form input[type="text"] {
height: 14px; width: 200px;
margin-top: 3px; color: #000; border: 1px solid #000; }
You can use the size attribute in your select element. Also, remove the height property for this to work.
.select-box {
border: 1px solid #000;
text-align: center;
}
form input[type="text"] {
height: 14px;
width: 200px;
margin-top: 3px;
color: #000;
border: 1px solid #000;
}
<select class="select-box" id="form" onChange="window.location.href=this.value" size="2">
<option value="">Select</option>
<option value="http://foobar.com/1.html">1</option>
<option value="http://foobar.com/2.html">2</option>
<option value="http://foobar.com/3.html">3</option>
<option value="http://foobar.com/4.html">4</option>
</select> CSS
I want to know if there is any way to add asterisk after first option of select element?
Here is my html
<select class="form-control textyformcontrol">
<option selected>Service area</option>
<option>First Option</option>
<option>Second Option</option>
<option>Third Option</option>
</select>
Here is css
.textyformcontrol {
outline: none !important;
box-shadow: none !important;
border: none !important;
border-bottom: 1px solid #fff !important;
background: transparent;
border-radius: 0px;
color: #fff;
font-size: 16px;
padding: 10px 0px;
word-spacing: 2px;
height: auto;
}
All the options are having default white color.Thus how to add asterisk in red color through css?
The following solution adds a red asterisk to each option element that does not have the selected attribute:
.textyformcontrol option[selected]:after {
content: "";
}
.textyformcontrol option:after {
content: "*";
color: red;
}
Please see my demo here.
I want to remove the default arrow from the select box and want to use custom icon. From the previous answers on SO, I have found out that it is not possible (to make it work with major browsers). Only possibility is to wrap the select inside a div, and set its width more than the div width and setting overflow: hidden.
I am trying following, but it does not work. What I'm doing wrong?
.selectParent {
width: 80px;
overflow: hidden;
}
.selectParent select {
width: 100px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 2px 30px 2px 2px;
border: none;
background: transparent url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat right center;
}
<div class="selectParent">
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
JSFiddle:
http://jsfiddle.net/gcPmC/
Please follow the way like below:
.selectParent {
width:120px;
overflow:hidden;
}
.selectParent select {
display: block;
width: 100%;
padding: 2px 25px 2px 2px;
border: none;
background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") right center no-repeat;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
.selectParent.left select {
direction: rtl;
padding: 2px 2px 2px 25px;
background-position: left center;
}
/* for IE and Edge */
select::-ms-expand {
display: none;
}
<div class="selectParent">
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
<br />
<div class="selectParent left">
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
Try to replace the
padding: 2px 30px 2px 2px;
with
padding: 2px 2px 2px 2px;
It should work.
I am using the following code to create a custom (to a degree) dropdown box (select) element
It looks ok until I click the dropdown, then the arrow disappears
the css and html are as follow:
.styled_select {
width: 200px;
height: 34px;
overflow: hidden;
background: url(/images_/icons/down_arrow_select.jpg) no-repeat right #ddd;
}
select {
background: transparent;
width: 233px;
height:34px;
padding: 5px;
-webkit-appearance: none;
color:#666;
border:none;
cursor:pointer;
}
<div class="styled_select">
<select name="reason">
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
<option value=4>4</option>
</select>
</div>