Remove all stylings (border, glow) from textarea
CssFormsTextareaBorderCss Problem Overview
I want to remove the stylings from a textarea and leave it all white without any border or glow, if possible. I've tried with different stuff found here on SO, but nothing works (tried with FF and Chrome).
So, is it possible and if so how to do it?
What I've tried so far:
textarea#story {
// other stuff
-moz-appearance:none;
outline:0px none transparent;
}
textarea:focus, input:focus{
outline: 0;
}
*:focus {
outline: 0;
}
Css Solutions
Solution 1 - Css
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.
Solution 2 - Css
If you want to remove EVERYTHING :
textarea {
border: none;
background-color: transparent;
resize: none;
outline: none;
}
Solution 3 - Css
try this:
textarea {
border-style: none;
border-color: Transparent;
overflow: auto;
outline: none;
}
jsbin: http://jsbin.com/orozon/2/
Solution 4 - Css
You want a minimal textarea
with no borders, or resize
-drag-icon.
Both when not selected and when focus
.
It's easy but you'll need to update rows
attribute via JS as newlines are added or removed during text input.
Here is the CSS
textarea, textarea:focus
{
font-family: "roboto","Helvetica Neue",Helvetica,Arial,sans-serif; /* make your choice */
font-size: 11px; /* make your choice */
border: none;
background: transparent;
-webkit-appearance: none;
-moz-apperarance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
outline: none;
padding: 0px;
resize: none;
width: 100%;
overflow: hidden;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-ms-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
}
in order to keep things working as expected (looking good) you have to programmatically set/update textarea
's attribute rows
to the count of \r\n
in the the textarea
contents plus 1 when the contents is set and when it's updated (user input / other)