javascript - Select with border inside -


i trying select border inside , custom icon.here did:

<label class="custom-select">   <select class="form-control black">     <option>1to9</option>   </select> </label> 

https://jsfiddle.net/o1r97q4o/
, here want do

enter image description here

here's solution copied this article , modified work markup op.

you had working positioning, , hiding native down-arrow.

.custom-select {    position: relative;    /*don't need demo styling*/      float: left;    min-width: 200px;    margin: 50px 33%;  }    .custom-select:after {    content: "▼";    font: 25px "consolas", monospace;    color: #333;    right: 11px;    /*adjust position want*/        top: 18px;    padding-left: 5px;    border-left: 1px solid #999;    /*left line */        position: absolute;    pointer-events: none;  }    .custom-select select {    /* hide native down-arrow */    -webkit-appearance: none;    -moz-appearance: none;    appearance: none;    /* add styling */        display: block;    width: 100%;    max-width: 320px;    height: 50px;    float: right;    margin: 5px 0px;    padding: 0px 24px;    font-size: 16px;    line-height: 1.75;    color: #fff;    background-color: #000;    background-image: none;    border: 1px solid #333;    -ms-word-break: normal;    word-break: normal;  }
<label class="custom-select">    <select class="form-control black">      <option>1to9</option>    </select>  </label>


Comments

Popular posts from this blog

java - Run spring boot application error: Cannot instantiate interface org.springframework.context.ApplicationListener -

reactjs - React router and this.props.children - how to pass state to this.props.children -

Excel VBA "Microsoft Windows Common Controls 6.0 (SP6)" Location Changes -