Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Customize a select with font-awesome

This is what I have actually:

HTML

<label class="select">
  <select name="email" id="email">
    <option>aaaa</option>
    <option>aaaa</option>
    <option>aaaa</option>
    <option>aaaa</option>
    <option>aaaa</option>
    <option>aaaa</option>
  </select>
</label>

CSS

.cforms select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;   
}


.select {
    position:relative;   
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: middle;
    zoom: 1;
    *display: inline;
    margin-top:40px;
}

.select:after {
  content: "\f0dc";
  font-family: FontAwesome;
  color: #000;
  padding:8px;
  position:relative;
  right:35px;
  top:0px;
  background:red;
  z-index:-1;
  width:10%;
  line-height:10%;
}

Problem

Actually, no arrows appears near my select.

Could you please help me with this.

I searched on the web for examples, but I can't make it works.

Thanks.

like image 269
teamo Avatar asked Jun 11 '15 13:06

teamo


People also ask

How do I add Font Awesome icons to select option?

To add icons in select option text we have to use the bootstrap-select plugin, which is a great plugin for customizing plain HTML select with some great customization options using bootstrap style. With this plugin, we can style the select element with only simple data attributes or initialize with Javascript.

How do I use Font Awesome in input field?

The font-awesome icon can be placed by using the fa prefix before the icon's name. Example: In this example, we will take a form where the input field is necessary. After that, we will place the font-awesome icon inside the input field. We will use the CDN link to use the font-awesome icons.


1 Answers

maybe so

1) Font Awesome 4

.select {
    border: 1px solid #ccc;
    overflow: hidden; 
    height: 40px;    
    width: 240px;
    position: relative;
    display: block;
}

select{       
    height: 40px;
    padding: 5px;
    border: 0;
    font-size: 16px;       
    width: 240px;
   -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.select:after {
    content:"\f0dc";
    font-family: FontAwesome;
    color: #000;
    padding: 12px 8px;
    position: absolute; right: 0; top: 0;
    background: red;
    z-index: 1;
    text-align: center;
    width: 10%;
    height: 100%;      
    pointer-events: none;
    box-sizing: border-box;   
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<label class="select">
    <select name="email" id="email">
        <option>aaaa1</option>
        <option>aaaa2</option>
        <option>aaaa3</option>
        <option>aaaa4</option>
        <option>aaaa5</option>
        <option>aaaa6</option>
    </select>
</label>

2) Font Awesome 5

.select {
    border: 1px solid #ccc;
    overflow: hidden; 
    height: 40px;    
    width: 240px;
    position: relative;
    display: block;
}

select{       
    height: 40px;
    padding: 5px;
    border: 0;
    font-size: 16px;       
    width: 240px;
   -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.select:after {
    content:"\f35a";
    font-family: "Font Awesome 5 Free";
    color: #fff;
    padding: 12px 8px;
    position: absolute; right: 0; top: 0;
    background: red;
    z-index: 1;
    text-align: center;
    width: 10%;
    height: 100%;      
    pointer-events: none;
    box-sizing: border-box;   
}
<link href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" rel="stylesheet">
<label class="select">
    <select name="email" id="email">
        <option>aaaa1</option>
        <option>aaaa2</option>
        <option>aaaa3</option>
        <option>aaaa4</option>
        <option>aaaa5</option>
        <option>aaaa6</option>
    </select>
</label>
like image 146
Dmitriy Avatar answered Sep 19 '22 11:09

Dmitriy