从纹理区移除所有样式(边框，发光)

我想删除样式从文本区，让它没有任何边界或发光，如果可能的话，所有白色。我试过在 SO 上找到不同的东西，但是都没有用(用 FF 和 Chrome 试过)。

那么，这是可能的吗? 如果可能的话，怎么做呢？

enter image description here

到目前为止我所做的努力:

textarea#story {
// other stuff
-moz-appearance:none;
outline:0px none transparent;
}


textarea:focus, input:focus{
outline: 0;
}


*:focus {
outline: 0;
}
146197 次浏览
小开

try this:

textarea {
border-style: none;
border-color: Transparent;
overflow: auto;
outline: none;
}

jsbin: http://jsbin.com/orozon/2/

小开
最佳答案

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.

小开

If you want to remove EVERYTHING : 

textarea {
border: none;
background-color: transparent;
resize: none;
outline: none;
}
小开

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)

 


提交答案