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

Question

我试图在maindiv的最右端为自定义下拉菜单添加我自己的插入符号图标。我怎样才能做到这一点？

＆＃13;

＆＃13;

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

.maindiv select{
  width: 240px;
  height: 40px;
  border: none;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

＆＃13;

＆＃13;

The specified command ("set") is invalid. For a list of available options,
run "ng help".

Did you mean "t"?

＆＃13;

 /*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";
    }
    

＆＃13;

＆＃13;

＆＃13;

Answer 2

您需要将伪css <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <item android:id="@+id/itemFragment1" android:title="Frag1" android:enabled="true" app:showAsAction="always|withText" android:icon="@mipmap/ic_launcher"/> <item android:id="@+id/itemFragment2" android:title="Frag2" android:enabled="true" app:showAsAction="always|withText" android:icon="@mipmap/ic_launcher"/> </menu> 用于:after并将.maindiv设置为.maindiv

＆＃13;

＆＃13;

position: relative

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

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

Answer 4

您可以这样做：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 5

刚刚将display: flex;添加到maindiv

＆＃13;

＆＃13;

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

.maindiv select{
  width: 240px;
  height: 40px;
  border: none;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;