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.
Related
I currently have a select element as follows:
<select class="select" id="startYear" onChange={(event) => setStartYear(event.target.value)}>
Then I have a bunch of options elements as well. Each looking as follows:
<option value=2017 selected={2017 == startYear}>2017</option>
<option value=2018 selected={2018 == startYear}>2018</option>
//lots of different years continuing on
I'm hoping to make it so that there's a static text that says "Start:" and then the dropdown is just all of the years (without the text). See the image below as an example. Anyone know where I can add the "Start:" text?
You would usually use a label for this kind of thing, where the label is to the left and the select box to the right.
div {
border: 1px solid black;
width: 100px;
border-radius: 15px;
padding: 5px 0 5px 10px
}
select {
border: none
}
<div>
<label for="start">Start: </label>
<select id="start">
<option>2017</option>
</select>
</div>
There is still an arrow there which your example image doesn't show, however, I would argue that you want to have the arrow there to denote that it's a select box/drop down. Without it, there's no indication and it's not friendly UX.
I was able to achieve this effect by surrounding the whole thing in a div, and adding the text and select there. With some css, it looks like a normal select prompt. You may have to fiddle with some of the variables to make it to your liking.
.select{
display: inline-block;
border: 2px solid black;
border-radius: 5px;
padding: 5px;
}
.select select {
display: inline-block;
border: none;
background-color: transparent;
}
.select select:focus-visible{
background-color: transparent;
border: none;
outline: none;
}
.select p {
display: inline-block;
text-align: center;
margin: 0;
}
<div class="select">
<p>Start:</p>
<select>
<option>15432542</option>
<option>54326</option>
<option>654262</option>
</select>
</div>
<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 have problem with select and options, in firefox I see this normal (small), but in google chrome, it's very big and not pretty!
The 2nd photo shows - what I want to see and 1st shows - what I see.
I want in <option>:
font-size: 20px;
I want in <select>:
text-align: center;
<select id="what">
<option value="0">0</option>
<option value="100">100</option>
<option value="1000">1000</option>
</select>
<style>
#what {
width: auto;
height: 60px;
border: 0px solid #333;
appearance: none;
text-align: center;
-moz-appearance: none;
-webkit-appearance: none;
font-size: 45px;
color: red;
background: rgba(0,0,0,0);
border-bottom: 1px solid red;
outline: none;
}
#what > option {
height: 40px;
color: #333;
border: 0px;
}
</style>
Please help.
Trying to style select boxes is going to get you a lot of cross-compatibility trouble. You won't be able to fix this with just CSS.
I'm afraid you're going to need to write or find a custom select box. I had a very similar problem and ended up writing my own with Javascript. But that was a while ago - you might be able to find something open source.
I need to style the text of a select box, not the list of options. When I add a padding to the select box, this is applied to the list of options, as well. Look at this image:
The icon is a pseudo-element ::before of the div. (I use a div because the select box doesn't work with pseudo-elements).
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
cursor: pointer;
display: inline-block;
height: 35px;
padding: 7px;
padding-left: 30px;
}
select::-ms-expand {
display: none;
}
.select-wrapper {
display: inline-block;
float: right;
position: relative;
}
.select-wrapper:before {
color: #ccc;
content: "\f0c9";
display: inline-block;
font: 16px "FontAwesome";
padding: 9px;
pointer-events: none;
position: absolute;
}
<div class="select-wrapper">
<select class="turnintodropdown">
<option selected="selected" value="">Menu</option>
<option value="http://localhost/wpdev/sample-page/"> Sample Page</option>
<!-- And more options... -->
</select>
</div>
I don't want that the list of options inherits the padding of the main select.
It's hard to tell without knowing the visual styles (FontAwesome?) you have applied in the picture. However, you can use the HTML option element as a CSS Selector:
.select-wrapper .turnintodropdown option {
padding: 0;
}
Alternatively, you can give all your options a class, and style them using that class as well.
Note: styling the padding property of the option element does not currently work in any browser except Firefox, although you can style things like color and background-color in all browsers, including IE11 (I don't have the ability to test older versions of IE).
A Chrome bug report exists for this, but it has been punted down the line for five years already, so I wouldn't hope for a fix soon.
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>