CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4
Usman Tahir
Usman Tahir

Reputation: 2663

Adding separator between arrow icon and text in select

I am trying to build a select menu and I am using Bootstrap 4. I replaced background to replace arrow icon in select element, but now I need to add border left to that image, I am not finding anyway.

For reference, I am attaching Image of what's required enter image description here

and this is what I have achieved so far

enter image description here

and code I did till now HTML

<select class="custom-select">
  <option disabled>Choose 1</option>
  <option>another</option>
  <option>2</option>
</select>

And this is my CSS

.custom-select {
  background: #fff url("/assets/images/down-arrow.png") no-repeat right 0.75rem center;
  background-size: 12px 12px;
}

Upvotes: 3

Views: 2731

Answers (3)

Carol Skelly
Carol Skelly

Reputation: 362700

Wrap the select in another DIV (eg. custom-select-wrapper) and use a CSS psuedo element for the border...

https://www.codeply.com/go/edxDmWNLx6

<div class="custom-select-wrapper">
  <select classs="custom-select">
    <option>opt1</option>
    <option>opt2</option>
    <option>opt3</option>
  </select>
</div>

CSS

.custom-select-wrapper {
 position: relative
}
.custom-select-wrapper:after {
  border-left: 2px solid #ccc;
  content:"\00a0";
  position: absolute;
  top: 0;
  right: 46px;
  z-index: 2;
  display:block;
  height: 38px;
}

Upvotes: 1

Bhuwan
Bhuwan

Reputation: 16855

You can use another image for the line in the background as well or make a combined image of arrow and line

Stack Snippet

.custom-select {
  background: url("https://image.flaticon.com/icons/png/128/118/118738.png") no-repeat right 0.75rem center, url("http://www.i2symbol.com/images/symbols/brackets/presentation_form_for_vertical_low_line_uFE33_icon_128x128.png") no-repeat right 2rem center;
  background-size: 12px 12px;
  width: 300px;
  height: 40px;
  -webkit-appearance: none;
  position: relative;
  padding: 0 10px;
}
<select class="custom-select">
  <option>1</option>
  <option>1</option>
  <option>1</option>
  <option>1</option>
  <option>1</option>
</select>

Upvotes: 4

SpaceDogCS
SpaceDogCS

Reputation: 2968

I suggest you wrap the select in a div and add an after to it

<div class="select-wrapper">
  <select class="custom-select"></select>
</div>

Than, in CSS you add the arrow with an after

.select-wrapper {
  position: relative;
  background: #fff;
  z-index: 1;
}

.select-wrapper select {
  background: transparent;
}

.select-wrapper:after {
  position: absolute;
  z-index: -1;
  top: 2px;
  right: 0;
  bottom: 2px;
  width: 12px;
  background: #fff url("/assets/rogers/images/down-arrow.png") no-repeat right 0.75rem center;
  background-size: 12px 12px;
  border-left: 1px solid #ddd;
}

I couldn't test the code, because you didn't share your HTML, so I just gave you an example.

Or than you can add the line to the arrow image

Upvotes: 1

Related Questions