What is the best way to create a transparent dropdown menu that displays only the arrow inside the button and the right border?

I am looking to make the dropdown button transparent, but simply using background:transparent; only shows the border. I want the arrow icon inside the dropdown button and the right border to be visible as well. Here is the code:

<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Regular</a>
<a class="dropdown-item" href="#">Link 2</a>
</div>
</div>

<< This is the desired look that I am aiming for

htmlcssbootstrap-4

Answer №1

Is this what you're looking for?

.dropdown-toggle {
  background:rgba(0, 0, 0, 0.5);
  color: white;
  border-width: 0 1px 0 0;
}
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown>
</button>
<div class="dropdown-menu>
<a class="dropdown-item" href="#">Item 1</a>
<a class="dropdown-item" href="#">Item 2</a>
</div>

Check out the bootstrap example here: https://codepen.io/anon/pen/EGZNKd

The arrow is currently white, so changing the background to transparent might cause visibility issues if the background behind it is also white. I adjusted it to a black color for better visibility.

Keep in mind, this CSS selector will affect all dropdown buttons, so be sure to make it more specific if needed.

Edit: updated to display the correct right border.

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

What is the quickest and most effective method for toggling more than 10,000 checkboxes using Javascript/jQuery?

I am facing a challenge with a div that contains over 10000 checkboxes. Due to technical limitations, I have no choice but to work with this large number of checkboxes. This is not related to any academic task. <div class="well well-sm" style="min-hei ...

javascriptjqueryhtmldomoptimization

I am looking to transform col-sm-4 into two evenly sized columns with one row at the bottom using Twitter Bootstrap

Hello there, I have successfully created three columns in one row with column sizes of col-sm-4 each. Each column is further split into two equal sections and includes a footer row. You can see the alignment in the image below: Check out this sample align ...

htmlcsstwitter-bootstrap

Adding style using CSS to a dynamically generated table row in Vue.js

Currently, I am working with a table that dynamically generates rows using v-for: <table> <tr><th class='name'>Name</th><th>Surname</th></tr> <tr v-for='data in datas'><td class=&a ...

javascriptjqueryhtmlcssvue.js

Listen for changes in the div height in Angular 2 using HostListener

After spending hours researching Event Listeners in Angular 2, it's clear that there is a lack of comprehensive documentation on the topic. My goal is to set the height of various div groups (generated using ngFor) to match the height of the tallest ...

javascriptcssangular

Unable to view the image in browsers other than Internet Explorer

On a webpage, there is a feature where clicking on the "Add More" link should display an input box and a "Delete" button image. Surprisingly, this functionality works perfectly on IE browsers, but not on Mozilla or Chrome. In non-IE browsers, only the text ...

javascriptcssgoogle-chrome

Is there an equivalent of HtmlSpecialChars in JavaScript?

It seems that finding this is proving more difficult than anticipated, even though it's such a simple concept... Is there an equivalent function in JavaScript to PHP's htmlspecialchars? While it's possible to create your own implementation, ...

javascripthtmlescapinghtml-encode

How to delete a div element in Material UI's Date Picker

In my project, I am utilizing Material UI's simple Date Picker module. However, I am looking to solely display the calendar section without the month and year indicators along with the navigation arrows. Is it possible to remove these specific element ...

javascripthtmlcssreactjsmaterial-ui

Seeking assistance with creating an iPad application utilizing JQtouch - any t

I am attempting to create an iPad app using jQuery and jQTouch for the second time. I want to split the existing jQTouch theme designed for iPhone, which uses one window, into two separate windows optimized for the iPad. My goal is to have navigation on t ...

jquerycssajaxipadjqtouch

"The server responded with a 405 error message indicating that the requested method

I have been working on a registration form project using HTML, JS, NodeJS, and SQLite. However, I am encountering an issue with the fetch function when trying to post the inputted information into the database. I keep receiving a POST 405 (Method Not Allo ...

javascripthtmlexpresssqliteliveserver

What is the best way to prevent a Bootstrap modal from refreshing the page when clicking an ASP.NET button?

I've encountered an issue while trying to display data in a Bootstrap modal view. The data is fetched from a database and successfully shown, but only for a brief moment before the page automatically refreshes. Below is the HTML code: <div class=" ...

jqueryhtmlasp.nettwitter-bootstrap

Guide to retrieving the primary key auto-increment value for the ID field in an SQL record using PHP Scripting

I am currently working on a multi-page web survey form and I have a PHP script called process.php that handles my responses on www.buythosecars.com. This script stores the responses in a MySQL table and then redirects the user to www.buythosecars.com/surve ...

phphtmlmysql

A guide to accessing files and displaying their content by utilizing button clicks in PHP

Is it possible to navigate through the files in a folder by using buttons like Next and Previous, and then display the file contents within a table cell? Below is my attempted output, which unfortunately isn't functioning as expected: View Sample Ou ...

phparrayshtmlcsslaravel-5.3

Effortlessly fill dropdown menus with data from JSON files

I've been using this jQuery code successfully, but I recently needed to add 3 more field columns to the JSON. My goal is to have the HTML select drop-downs dynamically change based on the data from the previous drop-down. Additionally, my current jQue ...

javascriptjqueryhtmljson

My approach to using this style in React involves utilizing the class attribute as follows: "class[attribute]" [Updated version 2]

When trying to customize an element based on its attribute, the process is a bit different in React compared to pure CSS. Here's an example: <div class='something' data-test='4'></div> ... .something[data-test] { bac ...

cssreactjs

When working with Angular, the onSubmit method may sometimes encounter an error stating "get(...).value.split is not a function" specifically when dealing with Form

When the onSubmit method is called in edit, there is an error that says "get(...).value.split is not a function" in Form. // Code for Form's onSubmit() method onSubmitRecipe(f: FormGroup) { // Convert string of ingredients to string[] by ', ...

htmlangularformssplit

HTML5 audio recording

I have been exploring different methods to record audio using HTML5, but so far I have not found a solution. I attempted to utilize this particular example without success. It seems that the statement about lack of support from any browser may be true. ...

htmlaudio-recording

Difficulty in showcasing error on the website with JavaScript

I have recently developed a webpage that includes several input boxes and a submit button within a form as shown below: <form action="" method="post" name="password"> Upon clicking the submit button, a JavaScript function is triggered to validate i ...

javascripthtml

Ways to automatically change a URL into a clickable link upon pasting

When attempting to paste a URL into the text box such as https://stackoverflow.com/, it does not automatically convert to a hyperlink. I previously tried using regular expressions in this related question. The function I implemented worked correctly, howe ...

javascriptjqueryhtmljquery-plugins

Ways to connect css file to ejs views in nodejs

Currently, I am tackling a beginner node.js server project. While I have successfully managed to render dynamic HTML using ejs templates, I seem to be facing difficulties when it comes to linking CSS styling to these templates. In an effort to address thi ...

cssnode.jsexpressejs

Utilizing Ajax for Multiplication

Is there a way to dynamically calculate and display the total amount by multiplying the unit price with the quantity entered in the text box as it changes? <div> <label id="" name="price" class="unitprice"><?php echo "Price: <label ...

javascripthtml