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
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
Post a Comment