Jump to content


Photo
- - - - -

Thin Blue Line Around Text Inputs & Search Input


Best Answer Jenny , 30 November 2012 - 06:59 PM

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;
}
Go to the full post


  • Please log in to reply
5 replies to this topic

#1 fintan

fintan

    Advanced Member

  • Members

  • 68 posts
  • LocationIreland
  • Country: Country Flag

Posted 30 November 2012 - 06:04 PM

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



#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 30 November 2012 - 06:29 PM

Can you please post a link to your site?



#3 fintan

fintan

    Advanced Member

  • Members

  • 68 posts
  • LocationIreland
  • Country: Country Flag

Posted 30 November 2012 - 06:30 PM

Apologies, 

 

Please Login or Register to see this Hidden Content

 

--

Fintan



#4 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 30 November 2012 - 06:59 PM   Best Answer

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:

 

Please Login or Register to see this Hidden Content


  • fintan likes this

#5 fintan

fintan

    Advanced Member

  • Members

  • 68 posts
  • LocationIreland
  • Country: Country Flag

Posted 30 November 2012 - 07:04 PM

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



#6 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 30 November 2012 - 07:05 PM

You're very welcome! :)