Separators can be implemented to enhance the visual distinction between arrow icons and text within

Currently, I am working on creating a select menu using Bootstrap 4. I successfully replaced the arrow icon in the select element by changing the background, but now I am facing a challenge in adding a left border to that image. I have tried different methods but haven't been able to find a solution.

To provide a visual reference, I have included an image of the desired design: https://i.sstatic.net/65A1S.png

Here is what I have achieved so far: https://i.sstatic.net/5px4I.png

Below is the code I have implemented up to this point:

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

Furthermore, here is the CSS code I have utilized:

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

Answer №1

Utilize a different image for the background line or create a combined image of arrow and line

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

Answer №2

Enclose the select element within another DIV container (e.g. custom-select-wrapper) and implement a CSS pseudo element to create the border...

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

Answer №3

One suggestion is to enclose the select element in a div and then add a pseudo-element after it.

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

In your CSS, you can style the div to include the arrow using a pseudo-element.

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

It's important to test the code with your HTML to ensure it works properly, but I provided an example to guide you.

Alternatively, you can add the line for the arrow image to complete the design.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encasing the bootstrap dropdown menu and trigger within individual parent divs for a tidier appearance

Is it possible to toggle a bootstrap dropdown when it is wrapped in another div by using attributes such as data-target or aria-labelledby? I have seen examples where data-toggle="dropdown" and class="dropdown-menu" are siblings. An example of what I am r ...

Why does LESS keep prompting me with missing elements?

I am currently working on my first project using Less and have been following a tutorial closely. However, when I try to compile with lessc, I encounter the following error: ParseError: Unrecognised input. Possibly missing something in C:\Path\t ...

Is there a way to position the Bootstrap navbar menu items in the center specifically for mobile devices?

I have a navbar that I want to center the menu li items when it collapses. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b9dbd6d6cdcacdcbd8c9f98c978b978b">[ema ...

Field input displacement

I am experiencing an issue with my contact form, specifically with the message subject field displayed as a menu. The problem only seems to occur on wide desktop displays, where it appears offset from the rest of the form. Despite my efforts to troublesho ...

Aligning container - property: inline-block;

Having trouble centering two divs that are set to "display: inline-block;" in your code? Removing the inline-block class centers them, but they end up stacking vertically instead of horizontally. See below for an example: #news { background-image: url ...

The hamburger icon on the Bootstrap 4 navbar expands as expected, yet it fails to collapse back when

<head> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src=" ...

What is causing the mouse to malfunction when interacting with this HTML form?

What is causing the mouse to not work with the form on this specific webpage? The issue here is that the mouse does not seem to be functioning correctly when attempting to interact with the input boxes within the Form. Upon clicking any of the input boxe ...

The border on a specific field is not showing up when using Django Crispy Forms

Utilizing bootstrap and crispy forms for styling my website has been successful, except for a border issue with the username fields. While all other fields are displayed correctly, the username fields appear without a border as shown in the image below: h ...

What is the best way to align an avatar within a cardHeader component in the center?

Recently, I've been working on a frontend project using Material UI. In my design, I have cards that display data, and I wanted to include an avatar in the center of each card. Despite using a card header to insert the avatar, I struggled to align it ...

The min-height attribute of the tooltip functions, but the min-width attribute does

I found a helpful tooltip on this site: I customized it to work with an input element: <div class="tooltip"> <input type="text" placeholder="Name" name="dp_name"> <span>Full name asd as dasd as dasd</span> </div> ...

Showing information retrieved from a database using PHP in a sequential manner

I'm currently working on developing a webpage that features 6 rows of images, with each row containing 4 images accompanied by captions right below them. The structure I have in mind is as follows: IMAGE IMAGE IMAGE IMAGE TEXT TEXT TEXT TEXT IMAGE ...

Prevent the bootstrap header in a table from scrolling by enclosing it in

I am encountering an issue with fixing the headers of multiple tables in a page within their dedicated divs. Despite trying various methods, I haven't been successful as the fixed header overflows the div. I want to confine it within the div. Additio ...

Trouble with CSS and JS tabs not activating when clicked?

I am experiencing issues with a navigation (organized in tabs) that is not functioning on this page, but it works correctly on this page using the same method for inclusion. When clicking "Norway" on the top left, the navigation opens but switching to the ...

Is there a way for me to extend an absolute div to the full width of its grandparent when it is within an absolute parent div?

Here is a structured example of my HTML and CSS: <div class="grandparent"> <div class="row">...</div> <div class="absolute-parent"> <div class="absolute-child">...</div> ...

Creating a responsive image within a panel using Bootstrap

I've been struggling to make a responsive image fit inside a panel while maintaining its aspect ratio and ensuring none of it gets cut off. I've attempted various CSS tweaks with no success. My setup involves Bootstrap along with React.js using r ...

Scaling boxes responsively according to screen size utilizing Bootstrap

Creating a portfolio website with a carousel section to display completed projects in a 2x2 grid layout, transitioning to a 1x4 on smaller screens is proving to be quite challenging. After trying various methods from Bootstrap documentation and YouTube tut ...

Problem with Flickity's is-selected feature

I am currently exploring Flickity and its functionality. I have a carousel that auto-plays, with the selected cell always placed in the middle and highlighted with a grey background. However, I would like to customize it so that the selected cell is positi ...

Ensure that the height of the content in JQuery Mobile is set to 100

I'm currently working on an app using JQuery Mobile. Check out this link for my HTML code. There's a full-screen <iframe> within my page. Even though I've specified width:100%; height:100%; border:0% for the iframe, it ends up being ...

How to position text in the center of a video using CSS

My attempt to center the name of my blog on top of a video background was not successful, even though I tried positioning it absolutely with 50% from the top. Can someone assist me in vertically and horizontally centering the text over the video? Here is ...

Provide the email address to use on the forum

Is there a way to code an email address in HTML that will be invisible and undetectable by forums? Thank you in advance. I'm looking for a more advanced solution like this one! <h>mariaburkke76</h><h><h><h><h>< ...