Adjusting the appearance of dropdown option borders in HTML/CSS - customize or eliminate borders as

select {
  width: 300px;
  font-family: inherit;
  font-size: 18px;
  padding-top: 10px;
  padding-bottom: 10px;  
  padding-right: 30px;
  display:block;
  color: #999;
  border: none;
  border-bottom: 1px solid #757575;
}
*:focus {
outline: #757575;
}
 
select:focus {outline:0;}
<select class="weekselection">
  <option value="" disabled selected>Choose the weekday</option>
  <option value="0">Monday</option>
  <option value="1">Tuesday</option>
  <option value="2">Wednesday</option>
  <option value="3">Thursday</option>
  <option value="4">Friday</option>
  <option value="5">Saturday</option>
  <option value="6">Sunday</option>
</select>

I'd prefer to eliminate or modify the appearance of my dropdown list:https://i.sstatic.net/VJG1Y.png

The blue component indicated by the arrow. I've attempted various combinations of

select {
  border: none;
}

*:focus {
outline: #757575;
}

select:focus {outline:0;}

However, it remains visible. How can I make it disappear? Appreciate your help!

Here's the HTML code:

<select class="weekselection">
    <option value="" disabled selected>Choose the weekday</option>
    <option value="0">Monday</option>
    <option value="1">Tuesday</option>
    <option value="2">Wednesday</option>
    <option value="3">Thursday</option>
    <option value="4">Friday</option>
    <option value="5">Saturday</option>
    <option value="6">Sunday</option>
</select>
htmlcss

Answer №1

Unfortunately, CSS is unable to modify the style of options in a dropdown.

However, you can create a list and simulate a dropdown effect to have more freedom in styling:

Check out this Demo:

$("ul li").slideUp();
$("label").click(function () {
    $("ul li").slideToggle();
});
$("ul li").click(function () {
    $("label").text($(this).text());
    $("ul li").slideToggle();
});
ul {
  display: table;
  list-style: none;
  padding: 0;
}

ul li {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label>One</label>
<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

Answer №2

Just like a previous question I came across:

The dropdown feature of a select element is actually part of something called the ShadowDOM. According to the latest CSS specifications, in level 3, there is currently no way to specifically target most elements within the ShadowDOM. You can refer to the full specs on the ShadowDOM, but unfortunately, it doesn't provide much guidance on your specific issue.

Chrome does have some unique selectors that can be used to style certain shadowDOM elements, but not all of them. Firefox has even fewer options available (to my knowledge), and Opera doesn't offer any at all. Internet Explorer (IE) may be equally bad or possibly even worse in this regard.

If you're concerned about compatibility with different browsers, your best option might be to utilize a Jquery plugin that can imitate a select element using other HTML elements if you really need to customize its appearance. Here's a useful one you could try out.

Select menu option border none

Answer №3

Using "!important" in your CSS rule should assist in resolving the issue.

select {
     border: none !important;
     }

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

Looking for an effective method to implement CSS styling within a list cell in JavaFX?

As a beginner in JavaFX with limited knowledge of CSS, I struggled to conduct proper research and provide relevant information here. I apologize for any confusion or duplication. I am seeking a solution to apply CSS to JavaFX controls, specifically in a Li ...

javacssjavafx

Retrieving data from a <div> element within an HTML string using jQuery and AJAX

Having trouble extracting a value from a div within an HTML string. Seeking assistance in identifying the issue. I've attempted various methods to retrieve the data, but none seem to work for me. It appears I may be overlooking something crucial. $( ...

javascriptjqueryhtmlajax

The responsive menu refuses to appear

my code is located below Link to my CodePen project I'm specifically focusing on the mobile view of the website. Please resize your screen until you see the layout that I'm referring to. I suspect there might be an issue with my JavaScript cod ...

javascripthtmlcss

Ensure that radio buttons are positioned next to their respective labels on separate lines

My HTML form is structured with sections as described below: I prefer having the labels inline to prevent the section from being excessively tall, but I'm facing an issue where the radio buttons are not staying aligned with their respective labels. ...

htmlcssforms

Dynamic input fields with autocomplete functionality

I have attempted to implement the solutions provided elsewhere on this specific issue, but unfortunately they do not seem to be working for me. It is highly probable that I am making some mistake in my approach... My main objective is to achieve what is me ...

jqueryhtml

Attempting to shift an element without relying on the use of position:relative

I'm trying to figure out if I can relocate this (image1) to (image2). I prefer not to utilize position:relative as it may disrupt my design in bootstrap. Image 1 (I don't want it here) Image 2 ( I want it here) Here is the relevant CSS code: ...

htmlcss

Is there a method available for downloading the HTML5 attribute that functions in Internet Explorer?

Is there a method to download attribute work in Internet Explorer. When attempting to force download a file on IE using The following works flawlessly on Firefox but not on IE <a href="image.jpg" download>Click here to download</a> ...

htmldownload

Shift the image down to the bottom of the sidebar

This is the code for my sidebar HTML, with the side navigation bar positioned on the left: #main-container { display: table; width: 100%; height: 100%; } #sidebar { display: table-cell; width: ...

htmlcss

PHP DOMDocument - Script tag containing Chinese characters is improperly formatted

Can anyone help me figure out why my PHP DomDocument is converting Chinese characters inside a script tag to strange symbols in the output? <?php $html = <<<EOD <!DOCTYPE html> <html> <head> <script> ...

phphtmldomdomdocument

Creating JavaScript Objects from HTML Form data with the help of serializeJSON

Struggling extracting HTML form data into the required JSON format for server communication. Despite following a guide, I can't get the output right. Managed to extract question keys and values, but labeling is tricky. Current Output: {"Question1":" ...

javascriptjqueryhtmljson

Creating space between elements in CSS div elements

I've come across numerous resources on this topic that have already been answered, but none of them have provided a satisfactory solution. Here's the scenario: I have created a basic fiddle showcasing the desired behavior: @ See fidlle If I h ...

htmlcss

Browse through content without displaying the page title on the navigation bar and without the use of frames

When I sign into certain websites, I have noticed that the address displayed is often something like this: https://examplesite.com/access Even though all the links on the landing page are clickable and functional, their corresponding addresses never show ...

javascriptphphtmlcssajax

Tips for incorporating a download button into a video player using Plyr JS

I'm using Plyr JS and I am trying to add a download option for each video. Here is what I've done so far to make the download option work: Even though I have included: controlsList="nodownload" <video controls crossorigin playsinline contro ...

javascripthtmlhtml5-videoplyr.js

What is causing my CSS grid items to overlap instead of aligning neatly in rows and columns?

I am encountering an issue with CSS grid where items are stacking on top of each other when I assign them to grid template areas. As a newcomer to CSS grid, I suspect that I may be overlooking some key principles. You can view my playground here: https:// ...

csslayoutcss-grid

Using jQuery, prevent the user from entering text into an input box when a checkbox

In my project, there is a checkbox that determines whether an input box is disabled. The issue arises when I try to disable the input based on the database value. For example, when the value is 0, it should display as disabled false; however, the input rem ...

javascriptjqueryhtmlajax

Accessing the value of a field using JavaScript/jQuery

Welcome to my page! I am working on obtaining the current Start and Finish date values. I plan to add a button for users to click, which will then retrieve all dates and display them somewhere on the page. But for now, I just need a way to access the date ...

javascriptjqueryhtmlextjs

applying a blur effect to the Vue modal mask

Trying to incorporate a blur panel behind my modal using vue.js, however, The issue arises when the modal-mask contains nested content. This makes it challenging to apply the filter: blur() property without blurring everything. Currently, I am only able t ...

htmlcssvue.js

Setting the default styling for unordered lists in Material-UI React is a breeze with these simple steps

Currently, I am attempting to recreate a basic blog using markdown with Next.js and Material-UI. However, it appears that something is stripping away the default styles from unordered lists. The list items (HTML elements) have been set with list-style: no ...

cssreactjsmaterial-uimarkdownhtml-lists

Diagonal-left ending div in cascading style sheets

Looking to achieve a div with a diagonal side similar to the image in the link below: https://i.sstatic.net/u9grW.png I'm trying to figure out the best way to do this. One idea is to position 2 divs closely together and rotate one of them. Alternativ ...

htmlcss

Preventing Flash of Unstyled Content in ElectronJS Browser Windows

Upon creating a new BrowserWindow and utilizing loadURL to incorporate an html file within the renderer, there is a brief instance where unstyled content is displayed for approximately half a second before the css is loaded. window.loadURL('file://&a ...

javascriptcsselectron