Modify the select input's border color when it is in focus

My select input's focus color is not changing, and I'm struggling to figure out the proper override.

.form-control:focus {
  border-color: inherit;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.forma #kome {
  border-color: #8e8e8e;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  text-align-last: center;
  cursor: pointer;
  color: #000000;
  -webkit-appearance: none;
  background: transparent url("http://icons.iconarchive.com/icons/mahm0udwally/all-flat/16/User-icon.png") no-repeat 15px center;
}

.forma select :focus {
  border-color: #2a6dc9 !important;
}
<form class="center-block forma" action="" method="post">
  <div class="form-group">
    <select class="form-control" id="kome" name="kome">
            <option value=" disabled selected ">Choose</option>
            <option value="smth"> smth </option>
            <option value="smth2"> smth2 </option>
        </select>
  </div>
</form>

htmlcss

Answer №1

Ensure there is no spacing between the select and :focus selectors. Spacing implies a parent-child relationship, for example "focused child of select". On the other hand, select:focus denotes an AND relationship: focused select.

.forma select:focus {
    border-color: #2a6dc9 !important;
}

Answer №2

I found a solution that worked for me in Chrome. Instead of changing the border-style to inset, I changed it to outset and specified the outline-color I wanted. This didn't affect the focus color on the options, but did alter the focus color when tabbing to it.

select {
   border-style: outset;
   outline-color: blue;
}

Answer №3

To highlight a selected child element when focused:

Update

.forma select:focus{
    border-color: #2a6dc9 !important;
}

to

.forma option:hover{
    border: 1px solid red ;
}

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

On smaller screens in portrait mode, CSS automatically incorporates margin adjustments

Here is the code I am working with: <html> <head> <style> body { margin: auto; width: 720px; } </style> </head> <body> <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ip ...

htmlcss

Prevent the Stop Button from triggering submission and then utilize JavaScript to submit the form

I have a global delete button utilized in various sections of my site. Below is the code snippet for reference. public function delete_button($id_to_be_deleted, $form_to_post_to, $button_name){ return form_open($form_to_post_to, array('class&apos ...

javascriptphpjqueryhtmlforms

Creating unique styles with styled components without the use of selectors

Is it possible to achieve contextual styling without using CSS selectors? For example: <Button primary> <Text>BUTTON</Text> // if the button is primary then have 20px padding else 0 <Icon/> // if the button is primary then ...

cssreactjsreact-nativestyled-components

Odd behavior observed when clicking on the link

On the initial click with an anchor tag, I am experiencing different behavior compared to subsequent clicks. When the href value is set to "", no HTTP GET request is made on the first click. I cannot determine why the first click would behave differently t ...

javascriptjqueryhtml

Is it possible to send a search query to thesaurus.com using HTML code on a webpage?

I've created an HTML page with a text field and a submit button. When the user enters a word in the text field and clicks submit, a servlet fetches the input using request.getParameter(). Now, I need assistance implementing functionality to send this ...

javahtml

Unable to display menu content text using jQuery

Currently experimenting with jQuery to create a dynamic submenu. The goal is to have a sub menu appear when the main menu is clicked, and then disappear when an item in the sub menu is selected, revealing additional information within a div. Unfortunately, ...

javascriptjqueryhtmlcssmenu

Print a <form> and specify the variable as the name

I'm encountering an issue with my code. I am attempting to use the variable $columnnames as the name for a checkbox. Despite multiple attempts, I have not been able to achieve success. <?php mysql_connect("host", "user", "password") or die("Connec ...

phphtmlmysqlinput

The Materialize CSS tabs are aligning vertically below each other, but functioning correctly upon refreshing the page

When using materialize css tabs, all the divs load one below the other on the initial page load. If I refresh the page, it starts behaving properly. <div class="row"> <div class="col s12"> <ul class="tabs"> <li class="tab col s ...

javascripthtmlcssreactjsmaterialize

Unpredictable Behavior of CSS Transition with JS createElement() Function

I'm using JavaScript to create a div element and I'm adding the CSS property transition: .5s linear top; When the user clicks on the element (onmousedown event), it is supposed to smoothly move to the top of the screen and then be deleted using ...

javascriptjquerycss

Using CSS nth-child to create a two-column checkers layout

I have formulated a form on my website that divides into two columns by using floats. I am interested in creating a "checkered" effect for these columns. Can anyone guide me on how to utilize nth-child to achieve this design layout? For reference, please c ...

css

I am faced with the puzzling situation where the value of my input type slider is displayed below the slider

I am currently working with HTML code that allows users to select a percentage using an input type range. Here is the code snippet I am using: <div class="container-fluid"> <div class="row"> <div class="c ...

htmlcssvertical-alignment

JavaScript providing inaccurate height measurement for an element

Upon loading the page, I am trying to store the height of an element. To achieve this, I have utilized the jQuery "ready" function to establish a callback: var h_top; var h_what; var h_nav; $(".people").ready(function() { h_top = $(".to ...

javascripthtmljquerycss

Angular 8 implementation of a responsive readonly input text field styled with Bootstrap 4

I want to make the input text read-only using Bootstrap. After some research on the Bootstrap website, I discovered that the form-control-plaintext class can be used for this purpose. <input type="text" readonly class="form-control-plaintext" id="stat ...

htmlcssangulartwitter-bootstrapbootstrap-4

Responsive design for Galaxy S7 devices is optimized through the use of media

I am encountering an issue with media queries on two different websites hosted on the same server, both being accessed using a Galaxy S7 device. @media only screen and (min-width:501px) and (max-width: 999px) { } @media only screen and (max-width: 500p ...

htmlcssmedia

Tips for refreshing a specific div element at set intervals using JQuery AJAX?

I need to make updates to a specific div element without refreshing the entire HTML page. The code below currently works, but it reloads the entire HTML page. Additionally, I am working with different layouts where I have separate files for the header, l ...

javascriptjqueryhtmlajaxmarko

Achieve a CSS design similar to the Cinemax logo with angled background ends

Is there a way to customize the angle at which the ends of a background are cut off when using -webkit-transform: rotate(-#deg); and background selectors for tilted text with a background? I'm looking to achieve a design similar to the Cinemax logo. ...

csstransform

A guide on showcasing Python Flask database entries in an HTML table using Jinja 2

I have a database with a table that I need to display in my web application using a specific route. My goal is to present the data from the DB in a clear and easy-to-read table format, similar to an Excel spreadsheet, through the app. Although what I hav ...

pythonhtmlflask

What is the best way to adjust the height of my website to properly display on all screen sizes

Is there a way to make my web page fit perfectly on the screen in terms of both width and height? I'm familiar with using Media Queries for adjusting widths, but how can I also control the height? Any suggestions on setting the height? I would great ...

jqueryhtmlcss

HTML table designed to work in both Internet Explorer and Firefox, with a header and footer that remain fixed while allowing vertical and

I am in need of a highly functional HTML super-table. I am open to using jQuery or any other JavaScript library, regardless of potential drawbacks, as long as it meets the following requirements. It must support: Compatibility with at least IE8 and the ...

htmlhtml-table

Is it not possible to use a hyperlink and the general sibling combinator simultaneously?

Hi everyone, I'm completely new to CSS so please bear with me as I try to explain my issue. I'm attempting to create an image hyperlink using the .link class. I want the images for both .link and .picture to "change" when I hover over the hyperl ...

htmlcsshyperlinkcss-selectors