0

I'm trying to put my own caret icon at the right most end of the maindiv for this custom dropdown. How can I achieve this?

.maindiv{
  width: 200px;
  height: 40px;
  overflow: hidden;
  border: 1px solid black;
  border-radius: 3px;
}

.maindiv select{
  width: 240px;
  height: 40px;
  border: none;
}
<div class="maindiv">
  <select name="" id="">
    <option value="">Item 1</option>
    <option value="">Item 2</option>
    <option value="">Item 3</option>
</select>
<!--   i want to put my own caret icon here -->
</div>
blankface
  • 5,757
  • 19
  • 67
  • 114

5 Answers5

1

 /*create a parent div with position relative*/

    .maindiv .select,
    .maindiv .select-font{
        width: 240px;
        height: 40px;
        border: none;
        position: relative;
        overflow: hidden;
        border-radius: 3px;
        border: 1px solid #000;
        margin: 0 0 15px;
        background: #eee;
    }

    /*style your select tag */

    select {
        width: 100%;
        height: 100%;
        border: 0px;
        padding: 0 10px;
        position: relative;
        z-index: 2;
        cursor: pointer;
        background:transparent;
    }

    /* Then Remove Browser Default caret or dropdown sign*/

    select {
        /*for firefox*/
        -moz-appearance: none;
        /*for chrome*/
        -webkit-appearance: none;
    }

    /*for IE10*/

    select::-ms-expand {
        display: none;
    }

    /*Put the icon in before or after and style it*/

    /* 1.Create caret sign with css */

    .select::after {
        content: "";
        position: absolute;
        right: 10px;
        display: inline-block;
        z-index: 1;
        top: 50%;
        transform: translateY(-50%);

    }
    .select.caret::after {
        border-top: 5px solid #000;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
    }

    .select.angle::after {
        border: solid #000;
        border-width: 0 2px 2px 0;
        padding: 2px;
        transform: translateY(-50%) rotate(45deg);
    }
    
    
    /* 1. Put Font as a caret sign advisable as ou can control it as a font  */
    
    .select-font::after {
        content: "";
        position: absolute;
        right: 10px;
        display: inline-block;
        z-index: 1;
        top: 50%;
        transform: translateY(-50%);
        font-family: fontawesome;
        font-size: 17px;
        color: #000;
    }
    .select-font.caret::after {
        content: "\f0d7";
    }
    
    .select-font.angle::after {
        content: "\f107";
    }
    
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="maindiv">

        <h2>1. Create caret with css</h2>

        <div class="select caret">
            <select name="" id="">
            <option value="">Item 1</option>
            <option value="">Item 2</option>
            <option value="">Item 3</option>
        </select>
        </div>

        <div class="select angle">
            <select name="" id="">
            <option value="">Item 1</option>
            <option value="">Item 2</option>
            <option value="">Item 3</option>
        </select>
        </div>

        <h2>2. Use Font awesome Libraray or Any other font Library Just include the style file in header</h2>

        <div class="select-font caret">
            <select name="" id="">
            <option value="">Item 1</option>
            <option value="">Item 2</option>
            <option value="">Item 3</option>
        </select>
        </div>

        <div class="select-font angle">
            <select name="" id="">
            <option value="">Item 1</option>
            <option value="">Item 2</option>
            <option value="">Item 3</option>
        </select>
        </div>


    </div>
Manish
  • 347
  • 1
  • 9
  • 1
    if you click on the triangle, it will not open the dropdown – Zuber Apr 20 '18 at 06:15
  • you have to change z-index make select {cursor: pointer;background: transparent;position: relative;z-index:2;}.select::after {z-index:1;} and if you want any background color added in .select{background:#eee;} – Manish Apr 20 '18 at 06:32
1

You need to use pseudo css :after to .maindiv and set .maindiv to position: relative

.maindiv{
      width: 200px;
      height: 40px;
      overflow: hidden;
      border: 1px solid black;
      border-radius: 3px;
      position: relative; // Added
    }
    .maindiv select{
      -webkit-appearance: none;
      -moz-appearance:none;
      -ms-appearance:none;
      appearance:none;
      width: 100%;
      height: 40px;
      border: none;
    }
    
    .maindiv:after {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 5px 5px 0 5px;
        border-color: #007bff transparent transparent transparent;
        position: absolute;
        right: 10px;
        content: "";
        top: 18px;
        pointer-event: none;
    }
<div class="maindiv">
      <select name="" id="">
        <option value="">Item 1</option>
        <option value="">Item 2</option>
        <option value="">Item 3</option>
    </select>
    <!--   i want to put my own caret icon here -->
    </div>
patelarpan
  • 7,188
  • 2
  • 20
  • 25
Zuber
  • 3,393
  • 1
  • 19
  • 34
  • if this or any answer has solved your question please consider accepting it by clicking the check-mark and upvote. This indicates to the wider community that you've found a solution and gives some reputation to both the answerer and yourself. There is no obligation to do this. – Zuber Apr 21 '18 at 11:39
0

there is a default icon ,the problem is the width of your select tag is higher than the width of main div

Faizal Hussain
  • 1,551
  • 2
  • 10
  • 18
0

You can do something like this:

.maindiv {
  width: 200px;
  height: 40px;
  overflow: hidden;
  border: 1px solid black;
  border-radius: 3px;
  position: relative;
}

.maindiv span {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: .8em;
}

.maindiv select {
  width: 240px;
  height: 40px;
  border: none;
}
<div class="maindiv">
  <select name="" id="">
    <option value="">Item 1</option>
    <option value="">Item 2</option>
    <option value="">Item 3</option>
  </select>
  <span>&#x25bc;</span>
</div>
VXp
  • 11,598
  • 6
  • 31
  • 46
0

Just added display: flex; to maindiv

.maindiv{
  width: 200px;
  height: 40px;
  overflow: hidden;
  border: 1px solid black;
  border-radius: 3px;
  display: flex;
}

.maindiv select{
  width: 240px;
  height: 40px;
  border: none;
}
<div class="maindiv">
  <select name="" id="">
    <option value="">Item 1</option>
    <option value="">Item 2</option>
    <option value="">Item 3</option>
</select>
<!--   i want to put my own caret icon here -->
</div>
DDan
  • 8,068
  • 5
  • 33
  • 52
  • Great solution, but I'd use some prefixes like display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display: flex; for more browser compatibility, especially IE 10. – Victor Stoddard Apr 20 '18 at 06:01
  • this solution doesn't run the `select`'s ` width: 240px;` and instead restricts width to the the maindiv. – blankface Apr 22 '18 at 22:38