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>
Related
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>
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'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
How to get the select dropdown arrow styled like shown in the image below.
<select>
<option>Select Any</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
Try this:
HTML:
<div class="styled-select slate">
<select>
<option>Here is the first option</option>
<option>The second option</option>
<option>The third option</option>
</select>
</div>
CSS:
div { margin: 20px; }
.styled-select {
height: 29px;
overflow: hidden;
width: 240px;
}
.styled-select select {
background: transparent;
border: none;
font-size: 14px;
height: 29px;
padding: 5px; /* If you add too much padding here, the options won't show in IE */
width: 268px;
}
.styled-select.slate {
background: url(http://i.stack.imgur.com/8CVVr.png) no-repeat right center;
height: 34px;
width: 240px;
}
How about this... Just set that image to Select's background.
.select-style {
width: 268px;
line-height: 1;
border: 0;
overflow: hidden;
height: 34px;
position:relative;
background:#fff;
}
.select-style>select{
-webkit-appearance: none;
appearance:none;
-moz-appearance:none;
width:100%;
background:none;
background:transparent;
border:none;
outline:none;
cursor:pointer;
padding:7px 10px;
}
.select-style>span{
position:absolute;
bottom: 0;
right: 0;
height: 0;
width: 0;
cursor:pointer;
border-right: 10px solid #ff0099;
border-bottom: 10px solid #ff0099;
border-left: 10px solid transparent;
border-top: 10px solid transparent;
}
select::-ms-expand {
display: none;
}
<div class="select-style">
<select>
<option>Select Any</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
<span></span>
</div>
Fiddle: https://jsfiddle.net/sank8893/bhy9do60/9/
As others have mentioned you can hide the default select arrow by appearance property and apply your own style.
To support lower versions of IE(i haven't consider below 9) as appearance property won't work even with ms prefix , you can use the below method to have common support.
Arrow made by css not an image.
$( "#sel_val" ).change(function() {
var option = $(this).find('option:selected').val();
$('#sel_txt').text(option);
});
.wrapper{width:250px;margin:10px auto;}
.sbx{
margin:0;
width:100%;
font-family:arial;
position:relative;
background-color:#eee;
}
.cus_selt:after{content:'';width:0;
height:0;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-top:10px solid #FD025F;
position:absolute;
bottom:-1px;
z-index:2;
right:-6px;
transform:rotate(-45deg);
}
.cus_selt{padding:20px;display:block;}
.styled {
float:left;
height: 56px;
margin: -58px 0 0;
opacity: 0;
width: 100%;
filter: alpha(opacity=0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="sbx" id="yoe_fld">
<span class="cus_selt" id="sel_txt">Select a value*</span>
<select id="sel_val" class="styled">
<option>Select</option>
<option>option1</option>
<option>option2</option>
<option>option3</option>
<option>option4</option>
<option>option5</option>
<option>option6</option>
<option>option7</option>
</select>
</div>
</div>
Source link for custom select dropdown click
Source link for CSS arrow click
see here jsfiddle
first you need to remove the default styling of the select dropdown. to do that use
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
for IE use :
select::-ms-expand {
display: none;
}
then just apply your desired style, in this case with background-image
or you can use border to make a triangle and place it by using pseudo-elements like :before or :after .
select {
background:url("http://i.stack.imgur.com/8CVVr.png") no-repeat scroll right bottom;
background-size:contain;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding:5px 10px;
}
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.