I have a select element:
<div class="select">
<select id="relationship" name="relationship">
<option value="">one</option>
<option value="">two</option>
<option value="">three</option>
</select>
</div>
with this CSS:
.select {
font-family: 'irregularisregular',Arial,sans-serif;
font-size: 2.5em;
height: 1.7em;
margin: 0.15em 0.5em;
padding: 0 1em;
width: 40%;
}
.select select {
-moz-appearance: window;
background: none repeat scroll 0 0 transparent;
border: 0 none;
overflow: hidden;
width: 100%;
}
When I click on the select, the options appear, but the block doesn't have the same size as the select block. I don't know what to change so the two blocks <select> and <option> have the same width.
Apart from the other CSS that you have, to ensure same width for the select and its options you should add something in the lines of:
select, select option {
width: 200px; /* change as needed */
}
The two block mentioned does have the same width. Its just hat u have padding in your parent div(.select) and no border on 'select' which is making it "look" bigger that's it.
Related
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.
This question already has answers here:
Positioning of an arrow in an HTML select
(7 answers)
Closed last year.
NOT A DUPLICATE-please read carefully and understand the question.I don't want to replace the arrow. I want to keep the arrow as the way it is and change it's position. appearance:none can hide the arrow and by setting background:url() I may be able to replace the arrow,but that's not my question
I have a dropdown list which appears good and works fine. We all know by default it adds a dropdown arrow at the right side of the dropdown list.Now what I want to do is to move the arrow bit lower to the position like margin-top:5px. But I can't find any pseudo elements or classes to write my code. I want to achieve this using only css. I found styles written to hide the element and add another one, but in my case I want to keep the icon as the way it is and change the position.
HTML
<select class="dropdown-select">
<option value="">Select Location</option>
<option value="location-1">Location 1</option>
<option value="location-2">Location 2</option>
<option value="location-3">Location 3</option>
</select>
CSS
.dropdown-select{
outline: none;
border: none;
}
Checkout how bootstrap is doing it here. in summary, they hide the original with appearance: none and add a custom SVG icon using background-image property
Here is a quick example
select {
display: block;
width: 100%;
font-size: 1em;
padding: 0.8rem 0.5rem;
border: 1px solid #333;
font-family: inherit;
/** for the dropdown indicator */
appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 1em;
}
It's not ideal to do it this way regardless. The <select> element particularly is hard to style. I would recommend changing the appearance instead via appearance: none;
This post is a good place to start.
this code select custom appearence,what is your problem:
<select class="white_select select_category">
<option value="">Select Location</option>
<option value="location-1">Location 1</option>
<option value="location-2">Location 2</option>
<option value="location-3">Location 3</option>
</select>
.white_select {
background: rgba(255,255,255,1) url(../../../assets/images/down-arrow.png) no-repeat scroll calc(5% + 3px) center/8px auto;
width: 100%;
}
.select_category {
font-size: 9px;
border-radius: 10px;
padding: 6px 4px;
border: 1px solid #d7d7d7;
background: #fff;
background: rgba(0,0,0,0) url(../../../assets/images/down-arrow.png) no-repeat scroll calc(5% + 3px) center/8px auto;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: #939598;
}
Change position of custom arrow in select options.
background: url(../images/downarrow.png) 97% center no-repeat !important;
There is no special pseudo elements for select dropdown icon in css.
But you can change the position of the icon by background property.
Or else use this kind of "height" or "line-height" for good look.
.select_category{
outline: none;
height: 50px;
line-height: 50px;
padding:0px 20px;
}
<select class="white_select select_category">
<option value="">Select Location</option>
<option value="location-1">Location 1</option>
<option value="location-2">Location 2</option>
<option value="location-3">Location 3</option>
</select>
I set a background image (arrow down) to a select box after setting the webkit-appearance attribute to none. When the option list is opened I want to display another background image (arrow up). Is there a pseudo class or something for it? I couldn't find anything during my research...
you can use the :focus pseudo class.
But this will indicate the "open" state, also when the <select> is selected via tab or an item was just selected. To circumvent this, you maybe use something like select:hover:focus but this is rather ugly and is not a solid solution.
select:focus {
background-color: blue;
color: white;
}
<select>
<option>Click me</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
It's not possible to detect if a HTML select element is opened using CSS, or even javascript.
If you wish to customise the arrow symbol of a custom dropdown, your best option is to use a custom dropdown component which maps to a hidden select element.
This post is old, but as today; the ::before and ::after pseudo-class still don't work on select element.
Here's a good opportunity to use the :focus-within pseudo-class. I made this simple codepen demonstrating the use of it.
The codepen
The snippet :
#charset "UTF-8";
.wrapper {
position: relative;
display: inline-block;
}
.wrapper::after {
content: "";
font-family: "Font Awesome 5 Free";
font-weight: 900;
position: absolute;
right: 16px;
top: 22px;
font-size: 18px;
pointer-events: none;
transition: 0.2s ease;
}
.wrapper:focus-within::after {
transform: rotateX(0.5turn) translateY(-2px);
}
.wrapper select {
background: linear-gradient(180deg, #F8F9FB 0%, #F1F2F4 100%);
border: 1px solid var(--grayscale-400);
box-sizing: border-box;
border-radius: 3px;
width: 200px;
left: 2px;
cursor: pointer;
padding: 24px 12px;
font-size: 16px;
appearance: none;
}
.wrapper select:focus {
outline: unset;
}
.wrapper select > option:first-child {
display: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
<div class="wrapper">
<select>
<option>Choice Label First</option>
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
<option value="Choice 4">Choice 4</option>
</select>
</div>
select item option lists are not showing properly in IE.
need to add padding and height for option element. Does any one knows how to fix this?
CSS
.reser_item_long select {
width: 106%;
width: 106.5%\9;
height: 33px;
*height: 33px;
float: left;
text-align: left;
border: none;
outline: none;
background: none;
cursor: pointer;
overflow: hidden;
text-transform: uppercase;
font-size: 10px;
color: #889099;
color: #889099\9 !important;
padding: 9px 0 0 7px;
padding: 0 0 0 7px\9 ;
padding: 0 0 0 7px\0/;
display:block;
(-bracket-:hack;
padding: 2px 0 0 7px ;
);
}
HTML
<div class="reser_item_long">
<div class="select-wrapper">
<select id="cmb-country" name="cmb-country">
<option value="-1">Please Select a Country</option>
<option value="0">Afghanistan</option>
<option value="0">Åland Islands</option>
<option value="0">Albania</option>
<option value="0">Algeria</option>
</select>
</div>
</div>
There is no work-around for this aside from ditching the select element
You should differently edit this question and add you browser version. But let me give you a solution after all.
The problem is that the Select, options, file inputs are rendered by the OS/Browser and not by the HTML itself and therefor give's problem in styling it.
You can via javascript simulate and style your own dropdown to make sure it looks the same way in every browser and OS. Basically it generates something that look and feels like a dropdown list but is just an interface for the hidden select in your code.
You could use something like http://formalize.me/ to style all forms elements on your page.
On IE8,9 and 10 a select element looks like the attached picture. The drop down arrow is replaced with something that looks more or less like a mouse.
On Firefox and Chrome it looks like a standard drop down with a down arrow.
I can't find anywhere that I've done anything with CSS to alter selects.
Any suggestions?
<td>
<select id='allocated' name='alloc' onchange='allocChange()'>
<option value='??' selected='selected'>??</option>
<option value='1A' >1A</option>
<option value='1B' >1B</option>
<option value='1C' >1C</option>
<option value='2A' >2A</option>
<option value='2B' >2B</option>
<option value='3A' >3A</option>
</select>
</td>
CSS not a factor - same thing happens even when stylesheet not loaded
It may be by default.. But you can change the arrow using css
.styleSelect select {
background: transparent;
width: 168px;
padding: 5px;
font-size: 16px;
line-height: 1;
border: 0;
border-radius: 0;
height: 34px;
-webkit-appearance: none;
color: #000;
}
.styleSelect {
width: 140px;
height: 34px;
overflow: hidden;
background: url("images/downArrow.png") no-repeat right #fff;
border: 2px solid #000;
}