I have a select element with a few options, but the icon that is rendered is not part of the element and therefore not clickable. Any ideas?
My code
html
<div class="styled-select icon-drop-down">
<select class="select">
<option value="low">Sort by: Low</option>
<option value="high">Sort by: High</option>
<option value="long text">long text</option>
</select>
</div>
css
.styled-select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
cursor: pointer;
overflow: hidden;
display: inline;
position: relative;
border-radius: 0;
border: none;
&.icon-drop-down::before {
position: absolute;
top: 5px;
right: 10px;
color: $dark-grey;
transform: scale(0.7);
}
}
pointer-events: none; on the pseudo element will enable you to "click through" the pseudo element as if it was not there.
For more information see:
http://developer.mozilla.org/en/docs/Web/CSS/pointer-events
I got the similar issue, add pointer-events: none; to sudo class style, only fix the issue in chrome and firefox, but it doesn't work properly in IE11. I used display: block; or display: inline-block; together with pointer-events: none; fix the issue in IE browser.
Related
<div class="filterPage-arrange">
<select name="arrangement">
<option hidden>Arrangement</option>
<option value="low">Lowest Price</option>
<option value="high">Highest Price</option>
</select>
</div>
style :
.filterPage-arrange>select{
width: 320px;
border-radius: 8px;
height: 48px;
font-size: 16px;
outline: none;
}
div.filterPage-arrange>select>option{
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 320px;
height: 48px;
font-size: 16px;
}
the style for select tag works, but the one for the option tag doesn't. I searched about it and js or something was used in the solutions I saw. but I don't want to use js. is there any other solution for this?
I have created a select element within a div with some options to change the language of the page.
The problem is, that the icon which is positioned absolute doesnt react to clicks.
HTML:
<div class="modal-select">
<select v-model="activeLanguage">
<option v-for="(translation, key) in translations" :value="key">
{{ translation.title }}
</option>
</select>
<i class="fa fa-chevron-down"></i>
</div>
SCSS:
.modal-select {
position: relative;
select {
background: #F8F8F8;
padding: 0 5px;
height: 34px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
border: none;
outline: none;
}
i {
position: absolute;
right: 5%;
top: 25%;
cursor: pointer;
color: #3097D1;
}
}
How could I solve this problem?
I don't know what you mean exactly.
Here a few things that could help.
Check the z-index css property. May be your select area is overlapping the icon.
If you want to click on the icon and open the select, you have to link it with js.
If you don't want any hover or animation in your icon, you can put the icon over the select area and give it pointer-events: none;
For example:
.modal-select {
position: relative;
width: 100px;
}
.modal-select select {
background: #F8F8F8;
padding: 0 5px;
width: 100px;
height: 34px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
border: none;
outline: none;
}
.modal-select i {
position: absolute;
right: 5%;
top: 25%;
cursor: pointer;
color: #3097D1;
pointer-events: none;
}
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css">
<div class="modal-select">
<select>
<option value="">option 1</option>
<option value="">option 2</option>
<option value="">option 3</option>
</select>
<i class="fa fa-chevron-down"></i>
</div>
I had added Fontawesome Icon in css to display it in select Dropdown
Now I am not able to click the Fontawesome Icon in IE 10 can any one know how to solve this
HTML
<div class="select">
<select>
<option value="">Order By</option>
<option value="1">ID</option>
<option value="2">Details</option>
</select>
</div>
CSS
.select {
position: relative
}
.select select {
-webkit-appearance: none;
-webkit-border-radius: 0px;
-moz-appearance: none;
appearance: none;
border: 0;
background-color: #e5e5e5;
height: 30px;
padding: 0 20px;
width: 100%;
position: relative;
margin-bottom: 0;
}
.select select::-ms-expand {
display: none;
}
.select:after {
content: '\f0d7';
font-family: 'FontAwesome';
font-size: 16px;
color: #000;
position: absolute;
right: 15px;
top: 6px;
pointer-events: none;
}
Fiddle
If you want to have the icons beside your existing elements in the dropdown, you have to include that you want them next to your HTML elements. Meaning, you have to add the specific FontAwesome icon next to your dropdown element for it to display. If that was your question.
Like this; <option value=""><i class="fa fa-your-content"></option>.
Else it won't display no matter how hard you try.
Additionally, have you linked to the FontAwesome source or CDN? Because without the source code, you can't display any of the customized elements.
I am trying to replace a select dropdown arrow with a fa-icon (chevron-circle-down) but I can only find that the background can be replaced with an image in the css file.I can add the icon over the select,but it won't be clickable.Any help how I use font icon in select dropdown list ?
as you can't use pseudo-elements on <select> you use them on a label instead.
using:
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
will hide the default down arrow the select has and instead you use the fa-chevron-circle-down icon with it's unicode \f13a as an :after pseudo-element applied to the label
it's not really a 'beautiful' solution, but it does the trick
let me know if it helps
see below snippet
label.wrap {
width:200px;
overflow: hidden;
height: 50px;
position: relative;
display: block;
border:2px solid blue;
}
select.dropdown{
height: 50px;
padding: 10px;
border: 0;
font-size: 15px;
width: 200px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
label.wrap:after {
content:"\f13a ";
font-family: FontAwesome;
color: #000;
position: absolute;
right: 0;
top: 18px;
z-index: 1;
width: 10%;
height: 100%;
pointer-events: none;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<label class="wrap">
<select class="dropdown">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</label>
There is an Select Element in a page, it working awesome in Firefox but very sick in Google Chrome..
Firefox snap
Google Chrome snap
..
HTML
<select id="dropDown" class="dropDown">
<option>Design & Creative</option>
<option>Share Point Developer</option>
<option>Software Development Engineer</option>
<option>Silverlight Developer</option>
<option>Dot Net Developer</option>
<option>Quality Assurance</option>
<option>Mobile Application</option>
<option>IT Sales</option>
</select>
CSS
.dropDown {
-webkit-appearance: none;
height: 60px;
width: 450px;
background: #c03400;
font-size: 12pt;
color: #fff;
border: none;
outline: none;
padding: 20px 15px;
display: block;
clear: both;
}
.dropDown option {
-webkit-appearance: none;
height: 10px;
padding: 10px;
color: #626262;
background: #f5f3f3;
outline: none;
padding: 10px 15px;
display: block;
box-shadow: none;
border: none;
}
.dropDown:hover, .dropDown:focus {
background: #a62e01;
}
The size difference in Chrome is because of the height attribute. You can't set the height of an option element in Google Chrome. How can I control the height of an Option element in Webkit?