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.
Related
I want to set font awesome icon on select drop down and change the background color as well... I tried this code but it won't be work..
Here is my CSS code:
select {
border-radius: 30px;
padding: 0px 70px 1px 20px;
margin-top: 50px;
margin-left: 45px;
font-size: 18px;
border: 2px solid orange;
box-shadow: 10px 3px 8px #888888;
appearance: none;
position: relative;
}
select i {
position: absolute;
float: right;
background-color: orange;
bottom: 0px;
pointer-events: none;
}
Here is my HTML Code:
<div class="row">
<p class="search">Search by Location</p>
<select class="dropdown">
<option>Canada</option>
</select>
<i class="fas fa-angle-down"></i>
</div>
Edited Answer
select.input-lg {
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
/* no standardized syntax available, no ie-friendly solution available */
}
select + i.fa {
float: right;
margin-top: -30px;
margin-right: 5px;
/* this is so when you click on the chevron, your click actually goes on the dropdown menu */
pointer-events: none;
/* everything after this is just to cover up the original arrow */
/* (for browsers that don't support the syntax used above) */
background-color: #fff;
padding-right: 5px;
}
Source: I want to change the select icon/dropdown icon to (fa-chevron-down). How can I?
Also you may follow this: font awesome icon in select option
For his code and a fontawesome solution
.row select {
display: inline-block;
appearance: none;
margin-right: -24px;
padding-right: 36px;
}
.row i {
pointer-events: none;
font-size: 1rem;
}
worked for me.
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 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>
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.
I need to add some custom styles to HTML select box completely changing its default style.
This is how my select box should be after adding custom styles.
I could have to get these styles to certain level. But still not 100%.
This is my HTML and CSS.
<span class="custom-dropdown large">
<select class="select select_large">
<option>Select an Option</option>
<option>Option One</option>
<option>Option Two</option>
<option>Option Three</option>
<option>Option Four</option>
<option>Option Five</option>
</select>
</span>
.large {
font-size: 15px;
}
.select{
font-size: inherit;
padding: 10px;
margin: 0;
}
.select_large {
background-color: #001848;
color: #fff;
}
.select_large option{
background-color: #dadada;
color: #000;
border: none;
padding: 2px 5px;
}
.select_large option::hover {
background-color: #20b390;
}
#supports (pointer-events: none) and
((-webkit-appearance: none) or
(-moz-appearance: none) or
(appearance: none)) {
.custom-dropdown {
position: relative;
display: inline-block;
vertical-align: middle;
}
.select {
padding-right: 40px;
border: 0;
border-radius: 3px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.custom-dropdown::before,
.custom-dropdown::after {
content: "";
position: absolute;
pointer-events: none;
}
.custom-dropdown::after { /* Custom dropdown arrow */
content: "\25BC";
font-size: 20px;
line-height: 15px;
right: 10px;
top: 50%;
margin-top: -5px;
}
.custom-dropdown::before { /* Custom dropdown arrow cover */
width: 40px;
right: 0;
top: 0;
bottom: 0;
border-radius: 0 3px 3px 0;
}
.large::before {
background-color: #001848;
//background-color: #dadada;
}
.large::after {
color: #dadada;
//color: #434343;
}
#-moz-document url-prefix() {
.select { padding-right: .9em }
.large .select { padding-right: 40px }
.small .select { padding-right: .5em }
}
}
This is a FIDDLE
Hope somebody will help me out.
Thank you.
Selects are really annoying to style. This is because they depend on the browser and operating system and therefore parts of them are not style-able. For example, you can change the background color of the options, but if an option is selected, the styling gets messed up (you can't change the color of the selected option).
Try looking into some jQuery plugins like ms-Dropdown: http://www.marghoobsuleman.com/jquery-image-dropdown
Your safest bet is to find a js plugin that will render a dynamic with custom styling while maintaining the functionality of your .
The problem with customizing with custom CSS is that its usually the OS who styles them and its looks change from OS to OS considerably, making it nearly impossible to style in an uniform matter with pure CSS.
simply do a search for 'jquery selectbox' or 'jquery custom select'