Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I remove the browser-added blurred border on focused form elements?

I’ve built an HTML form for an email signup. When you click in the email input's textarea, a blurred gray border surrounds it in Chrome. How can I turn this off?

http://jsfiddle.net/danielredwood/7Hs2r/

Thank you!

like image 209
technopeasant Avatar asked May 25 '11 20:05

technopeasant


People also ask

How do I get rid of the blue line in my input field?

If some div is clickable, this works too div:focus { outline: none; } to get rid of the blue outline.

How do you make an input border invisible?

border: none transparent; outline: none; This will not only remove the border around the input field but also the orange highlight when the input is in focus. +1 outline:none makes the border disappear even when the input is focused.

How do I remove highlight from input field?

Select the text that you want to remove highlighting from, or press Ctrl+A to select all of the text in the document. Go to Home and select the arrow next to Text Highlight Color. Select No Color.

How do you hide a border in CSS?

We can specify the no border property using CSS border: none, border-width : 0, border : 0 properties. Approach 1: We will give border-color, border-style properties to both headings, for showing text with border and no-border. For no border heading, we will use the border-width : 0 which will result in no border.


1 Answers

Use outline: none; on the CSS for the input element.

like image 118
Demian Brecht Avatar answered Nov 18 '22 18:11

Demian Brecht