Remove Safari/Chrome Textinput/Textarea Glow

Remove Safari/Chrome textinput/textarea glow

Edit (11 years later): Don't do this unless you're going to provide a fallback to indicate which element is active. Otherwise, this harms accessibility as it essentially removes the indication showing which element in a document has focus. Imagine being a keyboard user and not really knowing what element you can interact with. Let accessibility trump aesthetics here.

textarea, select, input, button { outline: none; }

Although, it's been argued that keeping the glow/outline is actually beneficial for accessibility as it can help users see which Element is currently focused.

You can also use the pseudo-element ':focus' to only target the inputs when the user has them selected.

Demo: https://jsfiddle.net/JohnnyWalkerDesign/xm3zu0cf/

Remove Safari select glow but keep caret

you can try outline:none this should remove the outline of the select. This should also work for any input elements

Remove Safari/Chrome iframe glow

May be you have to define webkit-appearance:none; for webkit browsers . Like this:

iframe{
 webkit-appearance:none;
}

Remove all stylings (border, glow) from textarea

The glow effect is most-likely controlled by box-shadow. In addition to adding what Pavel said, you can add the box-shadow property for the different browser engines.

textarea {
    border: none;
    overflow: auto;
    outline: none;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

    resize: none; /*remove the resize handle on the bottom right*/
}

You may also try adding !important to prioritize this CSS.

Remove the default settings for text boxes in google chrome and safari

Webkit browsers (Chrome/Safari) now support the resize property by default on some elements like textarea. To get rid of the knurling on the bottom-right corner, you should add:

resize: none;

in your CSS style. This will also disable users' ability to resize the textarea.

How to remove default chrome style for select Input?

-webkit-appearance: none;

and add your own style

How to remove the border highlight on an input text element

Before you do that, keep in mind that the focus outline is an accessibility and usability feature; it clues the user into what element is currently focused, and a lot of users depend on it. You need to find some other means to make focus visible.

In your case, try:

input.middle:focus {
    outline-width: 0;
}

Or in general, to affect all basic form elements:

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

---

In the comments, Noah Whitmore suggested taking this even further to support elements that have the contenteditable attribute set to true (effectively making them a type of input element). The following should target those as well (in CSS3 capable browsers):

[contenteditable="true"]:focus {
    outline: none;
}

Although I wouldn't recommend it, for completeness' sake, you could always disable the focus outline on everything with this:

*:focus {
    outline: none;
}

How to modify the style of the glow of input text field when focused?

That is the outline, it is a CSS3 property. ( http://www.w3schools.com/css/css_outline.asp )

input[type="text"]:focus{
    outline: red dotted;
}

You can style in a similar way you do with border

Demo: http://jsfiddle.net/FNZD6/4/

---

Related Topics