How to create a custom input border style while maintaining the focus outline in Firefox and Internet Explorer

Note: I am not looking to remove or customize focus styles for accessibility purposes. It is extremely difficult to replicate all the various focus styles across different browsers and operating systems.

When customizing the appearance of an input/textarea, the outline style disappears when the element is focused. This can result in strange border effects.

Why does this happen? In my opinion, it significantly hinders accessibility. How can we avoid overriding focus styles while making simple CSS changes like adjusting background color and border color?

I have tested this issue on Firefox Mac and IE 11 (Chrome seems to be working fine). You can experiment with it yourself on Codepen: https://codepen.io/lbineau/pen/dLgwoo

<label for="customized-input">Customized input</label>
<input id="customized-input" type="text" />

<label for="native-input">Native input</label>
<input id="native-input" type="text" />

Desired outcome: the default outline should remain visible even if the input border is customized.

Current outcome: the outline disappears when the input is focused.

cssfirefoxfocusaccessibilityoutline

Answer №1

The underlying cause of this issue remains unknown to me.

However, you have the ability to counteract it by utilizing the code provided below:

#customized-input:-moz-focusring {
  outline: Highlight solid 1px; 
}

Answer №2

If you are looking to modify a sibling element's CSS, you can achieve it using the following method:

        <label class="new-label" for="unique-input">Unique input</label>
        <input id="unique-input" type="text" />

        
  .unique-input:focus ~.new-label {
        &::before {
            border:2px solid blue;
            height:50px;
            width: 50px;
       
  }
}

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

Right-align the text in the title of the material card

Why isn't the CSS aligning my title of matcard to the right? <mat-card [ngStyle]="{ 'margin':'5px','height':'130px'}"> <mat-card-header> <mat-card-title [ngStyle]="{ 'text-align': ...

cssangularangular-materialmat-card

Tips for updating the background color of a select option

I'm looking to customize the background color of select options in my Bootstrap 4 form. Can anyone provide guidance on how to achieve this? `` <div class="form-group "> <select class="form-control > <option va ...

htmlcssbootstrap-4

Relocate the HTML checkbox to the left side of its width

I need an answer that utilizes only CSS, without any JavaScript. In a form, I have a checkbox as follows: <label for="autologin">Remember Me</label> <input type="checkbox" class="checkbox" id="autologin" name="autologin" value="1"> <d ...

htmlcsscheckboxcss-floatforms

Is there a way to smoothly slide an element in the same way another element can be dragged out

I am currently using AngularJS. My goal is to achieve the following: When the 'Fade in' button is clicked, a hidden element should slide out from the left side. It should appear behind the 'MAIN BASE' element, giving the illusion that ...

htmlcssangularjsangular-material

How can jQuery adjust the video dimensions for various devices?

I'm trying to display a video inside a div using jQuery, but the issue I'm facing is that I want the video to adapt and fill the div based on different screen sizes. Below is my code: <script type="text/javascript"> $(document).ready( ...

jquerycssjquery-mobilemobilevideo

Trim the data in the following table cell using CSS

I'm trying to create a list using a table structure: https://i.sstatic.net/ucICV.png However, the lengthy URL is causing the table to expand wider than desired. I have attempted solutions like: table { table-layout: fixed; width: 100%; } and td.t ...

htmlcss

Retrieve the present time of an ongoing CSS3 animation

I've been trying to retrieve the current time of a running animation, but I haven't had any luck so far. I can easily grab the start time using: myelement.addEventListener('webkitAnimationStart', function (evt){ console.log(evt.elaps ...

javascriptcssanimationdom-events

Combining rows and columns in Flexbox design

https://i.stack.imgur.com/tDLii.png I'm able to easily create this layout using the float property, but I'm having some difficulties achieving the same with flexbox. CSS: .a { background: red; float: left; width: 30%; ...

cssflexbox

Switch the class on a specific div section

As you scroll to the top, a class named "blue" is added to the element with the ID of "div". However, when the scroll returns to the bottom, the "blue" class remains without being removed. Fiddle Link: http://jsfiddle.net/5d922roc $(window).scroll(fu ...

jquerycss

What is the best approach for establishing a consistent font size and line height for a website using em units?

What is the optimal approach to ensure consistent typography across different browsers (font-size and line height) for an entire website with a fixed width of 970px, centered layout? It's common to receive designs from clients with varying font sizes ...

cssxhtmltypography

How to create a custom CSS style to make Bootstrap 4 modal slide in from the bottom

Back in the days of Bootstrap 3, this was the trick: .modal.fade .modal-dialog { -webkit-transform: translate3d(0, -25%, 0); transform: translate3d(0, -25%, 0); } Another approach that could have been used: .modal.fade .modal-dialog { transfor ...

csstransformbootstrap-4twitter-bootstrap-4

Limit the y-axis on CanvasJS visualization

Is it possible to adjust the minimum and maximum values on the y-axis of the graph below: new CanvasJS.Chart(this.chartDivId, { zoomEnabled: true, //Interactive viewing: false for better performance animatio ...

javascripthtmlcss

CSS code for a fixed fullscreen menu with scrolling

I have implemented a full-screen menu that covers the entire screen, excluding the header and menu tab bar. You can view it here: https://i.stack.imgur.com/h5cQa.png On smaller screens, the entire menu cannot be displayed at once, as shown here: https://i. ...

htmlcssangular

What is the best way to make a Dojo TitlePane overlap using CSS?

My dilemma involves a jsfiddle featuring two TitlePane widgets in the central pane's top right corner. Currently, clicking on the right TitlePane ("Switch Basemap") moves the left TitlePane ("Map Overlays") to the left. What I want is for the right Ti ...

javascripthtmlcssdojo

Switching input size

I need assistance with making the input search field wider when clicked on. The transition should be smooth, expanding from right to left. Initially, the input is positioned on the right side of the page and upon clicking, it should stretch to the left by ...

htmlcsscss-transitions

Block with vertical text covering entire height

I need to place an additional block with 100% height and vertical text (bottom-to-top direction) inside a variable height block, aligning it to the left side without using width and height calculations in JS. Is there a way to achieve this using CSS transf ...

htmlcsscss-transformsvertical-text

Changing the appearance of the navigation bar

<!-- Bootstrap 5.0.x library --> <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3c5e5353484f484e5d4c7c09120c120e">[email protected]</a>/dist/css/bootstrap.min.css" ...

htmlcssbootstrap-5

Even after dynamically removing the class from the element, the Click event can still be detected

My buttons have a design like this: <a class="h-modal-btn branch-modal-btn"> Buy Now </a> The issue arises when I need to remove certain classes and add attributes to these buttons based on the query string in the URL. Skipping ahead ...

javascripthtmljquerycss

Internet Explorer is unable to recognize the .less file format

I have created a less file that works perfectly in Chrome and Firefox, but it is not being recognized in IE 9. Does anyone have suggestions on how to make it run in IE 9.0? Below is a sample of the CSS code: @import "../core/variables.less"; @import "Mi ...

cssless

Do you have any recommendations for a creative CSS method to achieve a full-screen background image?

After searching online and experimenting with different methods, I have yet to discover a solution that suits my needs. My goal is to have the background image on my website centered, filling the entire browser screen, while also being compatible with resp ...

htmlimagecssbackground-image