Is there a way to adjust the border color of my <select> element without disrupting the existing bootstrap CSS styling?

In my Bootstrap (v4.5.3) form, the select options appear differently in Firefox as shown in the image below:

https://i.sstatic.net/3suke.png

Upon form submission, I have JavaScript code for validation which checks if an option other than "-- Select an Option --" has been chosen. If this condition is not met, the JavaScript stops the form submission and highlights the unselected option by changing its border color to red:

ELEMENT.style.borderColor = "red";

However, this change in styling causes the select element to lose its default Bootstrap appearance, making it look like the image below:

https://i.sstatic.net/9mPSN.png

The bottom select remains unchanged for comparison purposes.

I am wondering if there is a different way to highlight the option without affecting the Bootstrap styles. Should I be using a specific CSS class instead of modifying the borderColor property?

Edit: For example, visit https://jsfiddle.net/xbqucoLp/

javascripthtmlcssbootstrap-4

Answer №1

Bootstrap includes built-in validation CSS. The select style in Bootstrap may differ from what you're used to, but it ensures the select arrow remains consistent. You can find more information at this link

Check out a working example here: https://jsfiddle.net/0gqL7641/1/

An advantage of using this method is that the selected option changes color from red to green.

If you prefer an alternative solution, try using outline instead of border for styling without affecting the select element:

this.style.outline = "solid 1px red";

Another approach to changing the outline without impacting the border is to utilize shadows:

.redOutline {
    -webkit-box-shadow: 0px 0px 3px 3px rgba(255,0,0,0.5); 
    box-shadow: 0px 0px 3px 3px rgba(255,0,0,0.5);
}

Add the outline using the following code snippet:

this.classList.add("redOutline");

You can adjust the shadow CSS using the tool available at this website

Answer №2

Have you considered applying a different style to the element?

For example:

element.style.border = '1px solid red !important';

This approach could potentially solve the issue if the key attribute is the border color.

Answer №3

It appears that I was unaware of the distinction, my apologies. Typically, with custom selects like these, there are specific classes applied to create customized functionalities. Try identifying and modifying those classes to alter the border color. Using browser dev-tools to locate the elements enables you to experiment with their CSS directly in the browser, helping determine which element you need to focus on.

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

HTML and JavaScript code to desaturate or grayscale image rollovers without the need for additional image duplicates or sprites

Is there a way to achieve grayscale to color image rollover effects without duplicating images or using sprites? I'm looking for an alternative technique that can accomplish this. Any suggestions on how to implement it? ...

javascriptjqueryhtmlcssrollover

Unable to animate a second click using jQuery/CSS

I'm having an issue with animating on click using CSS. The animation works fine on the first click, but it doesn't work on the second click. This is because the click event is being overridden by jQuery to enable the dropdown menu to open onClick ...

javascriptjquerycssanimation

Having trouble with a switch statement in Javascript that is unable to find a case for "none."

In my code, I am checking to see if there is a ball in a specific map point and then changing the color of the pixels where the ball is located to match the color of the ball. Here is my code snippet: function UpdateColorInMapPoints(mapPointIndexs) { / ...

javascripthtmldebuggingswitch-statementoutput

The input data from the MySQL database requires two page refreshes in order to be retrieved

Every time I input new values into the form fields and submit them, the page needs to be reloaded twice to display the updated values. For example, consider the $balance_2 in the 7th line. This line calculates the sum of all row values and updates the Bal ...

javascriptphpjqueryhtmlmysql

Employing jQuery to save the href value as a fresh variable

There is an anchor tag with id 'item-1' that needs to be stored in a new variable called 'href'. The tag looks like this: <a id='item-1' href='#something'> To achieve this using jQuery, what approach should be ...

jqueryhtmlfrontend

Using Google Fonts with AMP and Ruby on Rails: A Challenging Task

I am currently in the process of implementing AMP pages on my Rails application. Unfortunately, I am facing difficulties with getting my font to display correctly. The Google Search Console is returning the following error message: "CSS syntax error in th ...

htmlcssruby-on-railsamp-htmlgoogle-fonts

Using AngularJS to encapsulate an externally loaded asynchronous library as a service

Is there a way to wrap a 3rd party library that loads asynchronously into an Angular service? What is the best practice for incorporating such libraries as services in Angular? Currently, I am approaching it like this: angular.module('myAPIServices ...

javascriptangularjsasynchronous

Filtering multiple rows in a table using Javascript

I'm currently working on creating a filter that can filter based on multiple inputs, with each input filtering in a separate column. Here is the JavaScript & code I am using: function myFunction(column, input) { var filter, table, tr, td, i, t ...

javascriptjqueryhtml-tabledom-events

Getting data before the Router is loaded following authentication with Angular 2+ - A comprehensive guide

I'm hoping this isn't a repeat. Within my login component, I have a feature that allows users to log in, which calls a service and retrieves a Token. Upon successful login, the token is saved to localStorage. Subsequently, I use the getUserData ...

javascriptangularangular2-routing

Using CSS3 to clear floats without altering the HTML structure

Despite searching for multiple solutions to this issue, I have yet to find one that works without requiring me to modify my HTML code. Here is the current HTML in question: <div class="name">Daiel</div> <div class="amount">30€</div ...

htmlcss

Tips for crafting interactive Dropdown menus

Visit this link for more information Hello all, I am a beginner in HTML and Javascript and seeking guidance on how to create dynamic dropdown menus similar to the ones on the provided website. I have successfully implemented the source code, but my questi ...

javascriptjqueryhtmlajax

Tips for handling an InvalidSelectorException in Selenium when logging into a website

I've been working on automating website logins using Selenium and here is the code I have written: from selenium import webdriver driver = webdriver.Chrome() driver.get("https://abcde.com") assert "xxx" in driver.title user = driver.find_element_by ...

javascriptpythonselenium

The dropdown feature appears to be malfunctioning in my ReactJS Bootstrap project

I'm currently working with reactJS and Bootstrap. I am attempting to display a user image with a dropdown menu, where the dropdown will open when the user clicks on it. Unfortunately, my dropdown is not functioning as expected. Below is the code sni ...

javascriptreactjsbootstrap-4

Nested ng-repeats within ng-repeats

I have a question regarding the correct way to utilize an inner ng-repeat inside of an outer ng-repeat: Essentially, I am looking to implement something along these lines: <tr ng-repeat="milestone in order.milestones"> <td>{{mi ...

javascriptangularjsangularjs-ng-repeat

Handling an HTML Form without the Submit Button using VeeValidate

I've implemented a form handler using its composable feature in my <script setup>: const { submitForm, resetForm, handleSubmit, meta } = useForm() function save() { // Want to submit the form here submitForm() // Not working showSaveSnac ...

javascriptvue.jsvuejs3vue-composition-apivee-validate

Issue loading a 300 MB file into BigQuery results in a timeout error

Trying to implement the Node.js example shown in the data post request section (located towards the end here: https://cloud.google.com/bigquery/loading-data-post-request) has hit a snag when dealing with larger files. While the sample code functions proper ...

javascriptnode.jsgoogle-bigquery

Replicate and $(document).ready()

My form has required fields that need to be completed. To alert users about blank fields, I have implemented the following code: $(document).ready(function() { $('input.required:text').focus(function() { $(this).css({'background ...

javascriptjquerycss

The Ajax request is not being triggered when using a different form submit method

Being a tech enthusiast, I have developed a handy function: function blur_slide_visit_count(){ $.ajax({ type: 'POST', url: 'add_save_slide_visitor_count.php', async: false, data: { fillvalue: fieldAr ...

javascriptphpjqueryajax

Tips for transferring properties from one React component to another React component

I need to figure out how to activate a button in a modal when text is entered into an input field. The form is part of a different class and is utilized within a parent class. How can I pass an onChange method to my form component? Check out the code for ...

javascriptreactjsmaterial-uireact-final-form

Python Selenium not registering button click

I'm working on scraping data from the website using Python with Selenium and BeautifulSoup. This is the code I have: driver = webdriver.Chrome('my file path') driver.get('https://www.ilcollege2career.com/#/') first_click = Web ...

javascriptpythonhtmlpython-3.xselenium