Remove All Stylings (Border, Glow) from Textarea

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 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/

How come I can't remove the blue textarea border in Twitter Bootstrap?

You have write -webkit-appearance:none; like this:

textarea:hover, 
input:hover, 
textarea:active, 
input:active, 
textarea:focus, 
input:focus,
button:focus,
button:active,
button:hover,
label:focus,
.btn:active,
.btn.active
{
    outline:0px !important;
    -webkit-appearance:none;
    box-shadow: none !important;
}

Remove Firefox glow on focused textarea

You can remove it with -moz-appearance:none;, though that may affect the whole appearance more than you're wanting.

Removing glow, border, vertical/horizontal scrolls of a textarea

You need to override bootstrap styling from .form-control

Change your css to this:

textarea{  
  outline: none;
  border: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}

And you will remove the outline, border and glow from you textarea.

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 change border color of textarea on :focus

.input:focus {
    outline: none !important;
    border:1px solid red;
    box-shadow: 0 0 10px #719ECE;
  }

Remove default focus outline and change to different color

It's a box-shadow style applied on focus.

add this code to remove it:

.form-control:focus {
   box-shadow:none;
}

You may add !important depending on your CSS order:

How to remove text area border (outline) when focused on with knockoutJs css binding?

You can use the style binding to set the outline based on the isFocus observable:

var viewModel = {  isFocus: ko.observable(true)};
ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<textarea data-bind="hasFocus: isFocus, style: { outline:  isFocus() ? 'none' : '1px dashed red'}"> </textarea>

How to remove outline in bootstrap 4

The theme you're using sets box-shadow to inset 0 -2px 0 #2196F3 on focus.

You need to override it, but not with none, because that would just remove it. You probably want it to remain at same value like when it's not focused. In short, you need this:

textarea:focus, 
textarea.form-control:focus, 
input.form-control:focus, 
input[type=text]:focus, 
input[type=password]:focus, 
input[type=email]:focus, 
input[type=number]:focus, 
[type=text].form-control:focus, 
[type=password].form-control:focus, 
[type=email].form-control:focus, 
[type=tel].form-control:focus, 
[contenteditable].form-control:focus {
  box-shadow: inset 0 -1px 0 #ddd;
}

Also note you need to load this CSS after Bootstrap CSS and the theme you're loading.

---

Related Topics