试图将我自己的插入符号图标放在自定义下拉列表中

Question

我正在尝试将我自己的插入符号图标放在maindiv 的最右端，用于此自定义下拉菜单。我怎样才能做到这一点？

.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>

Answer 1

您需要使用伪 css :after 到 .maindiv 并将 .maindiv 设置为 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>

Answer 2

 /*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>

Answer 3

有一个默认图标，问题是你的select标签的宽度高于主div的宽度

Answer 4

你可以这样做：

.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>

Answer 5

刚刚将display: flex;添加到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>