Tips for removing border highlight from an <select> element after being clicked

Is there a way to remove the border highlight (outline) of the <select> element after it is focused? I have successfully removed it for other elements like <input>, <textarea>, and <button>, but I'm struggling with the <select> tag.

Below is the CSS code I've used. Although I included select:focus, it doesn't seem to work as expected:

input:focus,
select:focus,
option:focus,
textarea:focus,
button:focus {
    outline: none;
}

Here is the code snippet: 

 <!-- CSS code -->

 <!-- HTML code -->

htmlcssbootstrap-4

Answer №1

It seems that the issue is caused by the styles applied from bootstrap:

.form-control:focus /* => from bootstrap css */
{
 ...
 outline: 0;
 box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); /* => this cause the highlight! */
}

To fix this, you need to override the box-shadow property for .form-control:focus in your own CSS:

input:focus,
select:focus, .form-control:focus,
textarea:focus,
button:focus {
  outline: none !important;
  box-shadow: none !important;
}
...

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  
<form class="qa-form-inline mt-2">
<select name="dbType" id="selectOptions" class="form-control required styled-select">
    <option value="option-select" disabled selected>Service</option>
<option value="option-1" class="option-grams">Example</option>
<option value="option-2" class="option-grams">Example</option>
<option value="option-3" class="option-grams">Example</option>
<option value="option-4" class="option-grams">Example</option>
<option value="option-5" class="option-grams">Example</option>
<option value="option-6" class="option-grams">Example</option>
<option value="option-7" class="option-grams">Example</option>
<option value="option-8" class="option-grams">Example</option>
   </select>
</form>
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

Answer №2

To customize the focus style of form controls, you can simply override the .form-control:focus with box-shadow: none!important;

.form-control:focus {
  box-shadow: none!important;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: none !important;
}

/* Additional CSS styles for various elements */
body {
  padding: 40px 20px 20px 20px;
}
/* Add more styles here */


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<form class="qa-form-inline mt-2">
  <select name="dbType" id="selectOptions" class="form-control required styled-select">
    <option value="option-select" disabled selected>Service</option>
<option value="option-1" class="option-grams">Example</option>
<option value="option-2" class="option-grams">Example</option>
<option value="option-3" class="option-grams">Example</option>
<option value="option-4" class="option-grams">Example</option>
<option value="option-5" class="option-grams">Example</option>
<option value="option-6" class="option-grams">Example</option>
<option value="option-7" class="option-grams">Example</option>
<option value="option-8" class="option-grams">Example</option>
   </select>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

If you specifically want to target the select element, then use this code:

select.form-control:focus {
  box-shadow: 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

How can a script be properly embedded into an HTML document?

Currently, I am facing an unusual issue with the script tags in my Django project. My layout.html file includes Jquery and Bootstrap in the head section. Using Jinja, I extended layout.html to create a new file called main.html. In main.html, I added a new ...

javascriptjqueryhtmldjango

Insert a section of background within the div

Does anyone know how to create a div with a partial background like the example shown here? https://i.sstatic.net/CDqCe.png I attempted to add white margin, but I'm struggling to get it right. ...

htmlcss

Trying to decide between using a Javascript or HTML5 PDF Editor?

I am in need of a solution that enables users to edit PDF files directly on an ASP.NET web page. This functionality is intended for creating templates and adding blocks/form fields to existing PDFs, complete with rulers and other necessary features. Desp ...

javascriptasp.nethtmlpdf-generation

Setting session expiration for an HTML page in MVC with JavaScript - A step-by-step guide

I'm working on a HTML page within an MVC framework that includes a button click function. I'm trying to figure out how to redirect the user to the login page if the page remains idle for 30 minutes. I've attempted using the code snippet belo ...

javascripthtmlasp.net-mvc

Enhance user experience with HTML-tags in tooltips

Is there a way to display a tooltip in Twitter Bootstrap that includes HTML tags for formatting? Currently, I am using the following code: <a class="my-tooltip" rel="tooltip" href="#" data-original-title="CPR + O<sub>2</sub>.">First-Aid ...

htmltwitter-bootstrap

Error: The Android Phonegap framework encountered an issue when trying to access the getDuration function without a properly initialized media

Encountering a LogCat error that I need assistance with. The web app code functions properly on iOS, but presents an error message on Android. Unable to call getDuration as mediaplayer is invalid Your help is greatly appreciated. ...

androidhtmlcordovaandroid-mediaplayer

The concept of dynamic inheritance within Struts2's Tiles plugin adds a new

I am currently utilizing the Struts2 framework in conjunction with the tiles 2.0.6 plugin for my web application. Within my webapp, there is a primary "base" layout that comprises of a header, a footer, and the main page content: <definition name="shar ...

htmljsptiles

Looking for a substitute for iframes when using jQuery UI tabs?

I currently have a Spring-based web application that integrates with jQuery Tabs. What I'm doing is building a data string with specific parameters and appending it to a URL: var hrefData = "?" + item1 + "&" + item2 + "&" + item3; var href = ...

javascriptjqueryhtmlajaxjquery-tabs

IE11 is unable to display the background image

I am attempting to create a process roadmap by using background images on list items. The background-image on the list item is not showing up in IE11 (also in all versions of IE10, 9, etc). CSS CODE body{padding: 50px 0;} .status-line { width: 80%; ...

htmlcssinternet-explorer

Jquery's mouseclick event selects an excessive number of elements

Is there a way to retrieve the ID of an element when it is clicked, only if it has one? I currently have this code set up to alert me with the element's ID: $("[id]").click(function(event) { event.preventDefault(); var id_name = $(this).attr ...

javascriptjqueryhtmlcssclick

Having trouble generating an image with JavaScript

I am currently working on incorporating an image onto a webpage using JavaScript. Surprisingly, even the alert('This function works!') is not displaying anything! What could be causing this issue? Please assist! <!DOCTYPE html> <html> ...

javascripthtml

issues with alignment between bootstrap div and canvas

I am currently working on a project with a canvas inside a div using three.js. My goal is to display a purple bar for user settings on the right side of the three.js window. However, I am encountering an issue where Bootstrap is not recognizing that I want ...

htmlcssangularbootstrap-4three.js

CSS: Setting the minimum width of a table in your web design

I am facing an issue with a table that should expand to fill 100% of the width, but also need it to respect a min-width rule when I resize my browser window. Unfortunately, setting a min-width directly on the table does not seem to work (tested in Safari&a ...

css

Tips for Transitioning a Div Smoothly Upwards with CSS!

This is the code that relates to the title: #main { float: left; width: 20%; height: 10vh; margin-top: 10vh; margin-left: 40%; text-align: center; } #k { font-family: Questrial; font-size: 70px; margin-top: -7px; ...

htmlcsscss-transitions

What is the best approach to assigning a default value to @Html.EditorFor(model => model.location)?

After attempting to add , new { @Value = "test" } and failing, I then made modifications to the model as follows: private string _location = string.Empty; public string location { get { return _location; } set { _location = value; } } Even when ...

asp.net-mvc-3htmlmodeldefault-value

Show text on a button press in Angular

I have set up a group of three buttons using ngFor, each button has its own unique name stored in an array called buttonData[]. The buttonData array also includes corresponding text and images for each button. My goal is to display a specific text and imag ...

htmlangulartypescriptbuttonngfor

Rotational orientation of a progress circle image in SVG

I am currently working on developing a circular progress bar, similar to the one shown in the image below. The progress of this bar is determined by percentages and it moves around the circle accordingly. I have managed to get the progression moving, b ...

javascripthtmljquerysvg

Different methods of displaying the next image from a URL without explicitly setting the dimensions

I am attempting to display an image in Next.js without specifying the width and height by using import Image from 'next/image';. It should be noted that the image is sourced from a URL, not a specific folder within the project. <Image si ...

javascriptcssreactjsimagenext.js

The content within the flex box element is making the flex box element grow in size

I have set up a flex box container with 3 child divs inside, and I would like to maintain the same size ratio for all 3 (1:1:1). However, when I add text to the child divs, the ratios change to accommodate the overflow of text. For example: ...

htmlcssflexbox

Trouble aligning items in a fieldset with Bootstrap

While working on a wire frame, I am attempting to create the HTML structure based on it. The required structure that needs to be built is outlined in this diagram: https://i.sstatic.net/ypp2f.png Progress has been made on aligning elements using a two-col ...

htmlcsstwitter-bootstrapbootstrap-4