Eliminate the border on a select option when it is in the active

Did you happen to notice the new border that Google added to select options when active in Chrome? Wondering how you can remove it since Firefox doesn't display this border?

Google Chrome Version 83.0.4103.61 (64-bit)

<html>
<head>
    <style>
        select option:focus {
            border:0px;
            outline:0px;
            -webkit-appearance: none;
            outline: none !important;
        }
    </style>
</head>
<body>
    <select>
        <option>Test11</option>
        <option>Test22</option>
    </select>
</body>
</html>

Check out this fiddle for more information.

Answer №1

Give this a shot:

select:focus {
    border:none;
}

Answer №2

Assigning a property to the select element:

select:focus {
  outline: none; 
}

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 may be causing the MuiThemeProvider to override the style of a component?

Within my outer component, I am utilizing MuiThemeProvider: <MuiThemeProvider theme={full_theme_e}> <div> <AppBar /> <Filter /> </div> </MuiThemeProvider> Inside the Filter component, I have specified a ...

Updating existing text to create personalized HTML dropdown menus

I have designed a unique set of dropdowns by using divs and checkboxes instead of the traditional elements My goal is to dynamically change the 'select-wrapper--title' text (e.g. the first option) based on the selected option in the dropdown I ...

Adjust the background color of a non-selected Material-UI checkbox

Currently, I am working with a combination of React-Redux and Material-UI to style my project. Within this setup, I have a checkbox component that is placed on a toolbar with a blue background color (#295ED9). So far, I have successfully altered the color ...

Switching between fixed and unfixed divs causes two absolute divs to alternate

I am currently working on a code to keep a fixed div ("two") in place between two absolute positioned divs ("one" and "footer") while scrolling. However, there is an issue that arises when the browser window is resized. The distance between the footer and ...

I am attempting to populate a cell in a row with an image

Having trouble fitting an image into a column of a row created using Bootstrap. I want the image to be the same height as the row and any part that doesn't fit the width to be cropped out. However, the image either takes up only the width of the colum ...

Encountering difficulty when trying to parse an HTML file as JSON using AJAX, resulting in an 'unexpected token' error

I have a Siemens s7 1200 PLC with a webpage on it that is structured like a json file (even though it is in html format to allow the PLC to modify variables). I am attempting to retrieve this data from an external web server using an ajax request. The only ...

What is the best way to show a pop-up message to a visitor on my site for the first time

I am seeking a way to showcase a popup the first time a user lands on my website. At present, the popup appears only upon page refresh. Check out the demo below: var popupdisplayed = false; jQuery(function() { jQuery('[data-popup-close]').o ...

Is there a way to display a floating image in Rmarkdown HTML output?

Looking for a way to have my company's logo floating at the top of an rmarkdown file with html output. Is there a method similar to the floating table of contents in rmarkdown? ...

Struggling to Collaborate with External PHP File Leads to Garbled Results

Recently started learning PHP and I'm pretty sure I have it set up correctly with my local IIS as I was able to use it in a form on another local website. For this particular project, I have a basic HTML file structured like this: <!doctype html&g ...

The z-index property does not seem to function properly when used in conjunction

I am experiencing an issue with the z-indexes of two divs: one with default positioning and the other with a fixed position. No matter how I adjust the z-index values, it appears impossible to make the fixed-positioned element go behind the statically pos ...

After being reloaded multiple times, the time and date mysteriously vanish

Issue with Javascript/jQuery/jQuery Mobile Code After reloading or refreshing the page multiple times, the values for currentDate and currentTime seem to disappear sporadically. Strangely, they start working fine again after a few more reloads. Can anyone ...

Issue with Angular-UI Select2 directive's search feature malfunctioning

I've been utilizing the angular-ui select2 directive, even though it's considered deprecated now. However, my application heavily relies on this directive and I have an enhancement in mind that I would like to implement. We are planning to transi ...

How to use CSS to conceal asp:BoundField elements

Can someone help me figure out how to hide my asp:BoundField using CSS without losing access to the values? I've tried setting visible=false, but that prevents me from accessing the values. Then I attempted to hide it with CSS, but that doesn't w ...

Footer panel in Bootstrap not aligning to the bottom of the page

I'm experiencing an issue with my footer getting stuck in the middle of the page. Strangely, this problem only occurs on one specific page, and not on any other pages. I've tried various methods to fix it, but none of them have been successful. ...

jQuery mobile : accessibility helper for hidden elements

Within my HTML structure: <div data-role="fieldcontain" id="containdiv" class="no-field-separator"> <label for="field1" class="ui-hidden-accessible">To</label> <input type="search" name="field1" id="field1" autocorrect="off" a ...

Control the appearance of your Angular UI-Grid by dynamically adjusting the CSS style as the page size changes

How can I dynamically change the CSS style when the page size is adjusted in Angular UI-Grid? In my use case, I need to display edit/delete options in grey color based on the type of user logged in. The ng-disabled directive is set based on the "row.entit ...

Encountering difficulties reaching $refs within component method

Trying to access a ref defined within a template when an element is clicked. Here's the HTML: <!DOCTYPE html> <html lang="en"> <head> <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protectio ...

Discovering the best way to choose a button from every button group at once (non-radio) in Bootstrap

Whenever I choose a button from one group, it works perfectly. However, when I select a button from the next group, it seems to forget the selection I made in the first group. This is a common issue that has been discussed on Stack Overflow multiple times. ...

Python Selenium error: NoSuchElementException - Unable to find the specified element

Coding Journey: With limited coding knowledge, I've attempted to learn through various resources without much success. Now, I'm taking a different approach by working on a project idea directly. The goal is to create a program that interacts wi ...

Steps for initializing and loading the Ace editor:

I've been attempting to utilize the Ace code editor library (), but I'm encountering some issues. The embedding guide suggests that the required js files should be loaded from Amazon's CDN. <script src="http://d1n0x3qji82z53.cloudfront.n ...