Jump to content
fintan

Thin Blue Line Around Text Inputs & Search Input

Recommended Posts

fintan+    1
fintan

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

--

Fintan

Share this post


Link to post
Share on other sites
Jenny    33
Jenny

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
fintan+    1
fintan

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


×