Jump to content

Thin Blue Line Around Text Inputs & Search Input

Recommended Posts


Hi Guys


Been trying to find the CSS tag for the thin blue line that appears when you click the cursor into a text input area such as the search input, just want to change the color. 


I've tried both Firebug and Chrome Dev tools but the blue line disappears when they are enabled - anyone tracked this down before - I've search forum and docs already but no luck.


Many thanks



Share this post

Link to post
Share on other sites

You need to select the "focus" option in Firebug because that's what you're doing when you click the text box. Here is the CSS that shows up and causes the blue outline:


textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .uneditable-input:focus {
    border-color: rgba(82, 168, 236, 0.8);
    outline: 0 none;
  • Like 1

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post

Link to post
Share on other sites

Brilliant, thanks Jenny - sorted + now know about 'focus'!

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now