I'd like to remove the overlap between the arrow and text in Chrome if possible.
This is what happens in different browsers:
This is the code:
.search-options-wrapper select {
-webkit-appearance: none;
-moz-appearance: none;
background: url("http://i60.tinypic.com/w888ic.png") no-repeat 88px center;
background-size: 12px;
overflow:hidden;
display: flex;
border: 0;
}
<div class="search-options-wrapper">
<select id="options-primary">
<option>short text</option>
<option>Long text lalalalalaa</option>
</select>
</div>
What I would do is add padding-right that will contain your background image of the down arrow. Then change it's placement so it is not starting 88px from the left of the select box. This way the text doesn't have an opportunity to run into your arrow as it cannot enter the padded area.
.search-options-wrapper select {
-webkit-appearance: none;
-moz-appearance: none;
background: url("http://i60.tinypic.com/w888ic.png") no-repeat right center;
background-size: 12px;
padding-right: 20px;
overflow: hidden;
display: flex;
border: 0;
}
<div class="search-options-wrapper">
<select id="options-primary">
<option>short text</option>
<option>Long text lalalalalaa</option>
</select>
</div>
Related
I can't adjust the position of the drop-down arrow icon in the select element of HTML, I want to adjust the icon so it's not that close to the right
an image is attached below.
image
You cant move/style the arrow in select statement. You can remove the arrow by using style appearance: none;
More help here.
In this example, I am hiding the default arrow and displaying my own arrow.
<div class="abc">
<select>
<option value="a" selected="">a</option>
<option value="b">b</option>
</select>
</div>
<style>
select{
appearance: textfield;
-webkit-appearance: textfield;
}
.abc {
position: relative;
}
.abc:after {
content: "";
background: #ffffff;
right: 10px;
width: 24px;
height: 23px;
position: absolute;
z-index: 999;
background-image: url(arrow image path);
background-size: contain;
background-repeat: no-repeat;
top: 11px;
}
</style>
How do I move this drop down menu arrow so it's not too close to the edge of the drop down menu?
.footer_dropdown select {
color:white;
font-size:18px;
-webkit-appearance:auto!important;
/*webkit browsers */
-moz-appearance: auto!important;
/*Firefox */
appearance: auto !important;
}
You can't really style the default styling of browsers.
Simply remove the default styling from the select box by using appearance: none;
Then, add a background-image to the select tag and give it the proper styling you want. Take a look at my example. You can play a little with the settings.
Giving the position of the background-image with calc, where we place it 100% from the left, and subtract 20px from that; giving it basically the right: 20px; property. Placing it horizontally in the middle is what the 50% does after that.
Then we give it the background-size width and height both 15px; And we don't want it to repeat, so no-repeat.
select{
position: relative;
padding: 20px;
border: 2px solid black;
width: 400px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
background: #f9f9fa url('https://image.flaticon.com/icons/png/512/32/32195.png') calc(100% - 20px) 50% / 15px 15px no-repeat;
}
<select>
<option value="">--Please choose an option--</option>
</select>
HTML Code
<select class="dropdown" id="alphalist">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select> <br/> <br/>
<div class="search_bar">
<input class="search_nav" type="text" placeholder="Search..."/>
<span class="fa fa-search"></span>
</div>
CSS
.dropdown { width: 30px; /* customize Select tag(DropDown options) with id="alphalist" */
display: inline-block;
background-color: #F5F5F5;
border-radius: 10px;
outline: none;
transition: all .5s ease;
position: relative;
vertical-align: center;
font-size: 15px;
color: black;
height: 30px;
}
input { border: 0;
background-color: #F5F5F5;
border-radius: 10px;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
text-align: left;
width: 100%;
height: 32px;
}
So here I created a drop down list with option A, B and C. Then a search bar is created and also added a search icon.
CSS codes are written to customize both drop down list and search bar.
Now I need the drop down list to be placed inside the search box on left side and search button to be placed on right side. So at end it should almost look like:
Please help me.
Thanks for reading.
Just put them inside one div and set the display property of this div to a grid or flex;
and to specify the space:
if grid: use grid-column-template and use the fr or fix pixels (whatever you prefer).
if flex: use flex-grow / flex-shrink / or just fixed pixels.
Actually, there are so many ways to do it but those options are the easiest.
<div class = "select-color">
<h6>Colours (30 available)</h6>
<select class="select-dropdown formcontrol" name="colour" id="colour">
<option value="choose" disabled selected="selected">Select colour</option>
<option class="colourList" value="{{this}}">{{this}}</option>
</select>
<img src="images/selector.png" class="spin">
</div>
This is the html that I have and this is the css for it
.select-dropdown {
cursor: pointer; font-size: 20px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; /* remove default arrow */
padding-left: 15px;
border-radius: 13px;
background: transparent;
background: url(images/selector.png) 96% / 15% no-repeat;
}
I am trying, as you can see, to add the selector.png image on the right side of the selector tag but it doesn't work as I expected. I've seen others have done it with the background but for some unknown reason it doesn't work for me.
this is how it looks like
You need to use position:relative on the parent element. And then use position:absolute on spin to absolutely position it as required inside the parent select-color.
What you need is:
.select-color{
position:relative;
}
/*added above*/
.select-dropdown {
cursor: pointer;
font-size: 20px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* remove default arrow */
padding-left: 15px;
border-radius: 13px;
background: transparent;
background: url(images/selector.png) 96% / 15% no-repeat;
width:200px;/*added this. remove it.*/
}
/*added below*/
.spin{
width:15px;
position:relative;
left:-30px;/*adjust accordingly*/
}
<div class="select-color">
<h6>Colours (30 available)</h6>
<select class="select-dropdown formcontrol" name="colour" id="colour">
<option value="choose" disabled selected="selected">Select colour</option>
<option class="colourList" value="{{this}}">{{this}}</option>
</select>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/10897-200.png" class="spin">
</div>
I need to change the background of the drop down box
<select>
<option value="Chrome">Google Chrome</option>
<option value="Fire Fox">Fire Fox</option>
<option value="Opera">Opera</option>
</select>
1)Below is the CSS
2)i can give background but it will be display like below link http://jsfiddle.net/vamsivelaga/9bt5vncg/
select{
float: left;
width: 100px;
height: 26px;
border: 1px solid #d4d4d4;
margin: 10px 0 0 10px;
text-overflow: '';
background: url(http://s24.postimg.org/lyhytocf5/dropdown.png) no-repeat right 0;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
-ms-appearance: none;}
If you want to change the color of the background, just add some color at the end of "background".
For example
.drop_down_style{
background: url(http://s24.postimg.org/lyhytocf5/dropdown.png) no-repeat right #000;
}
The above code adds black color and replaces the default image with the url which is provided.
You can refer to this link if needed.