7

我正在尝试向我的网站添加一个带有圆角的文本区域。

我正在使用这个 CSS：

-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;

现在这在 chrome 中正确显示，但是当 textarea 获得焦点时，橙色边框被添加到 textarea 并且这样的边框没有圆角。

关于如何解决这个问题的任何想法？

谢谢

4

2 回答 2

14

To remove the default outline, and then emulate that outline with one that's more...style-compliant:

textarea {
    width: 40%;
    height: 10em;
    border-radius: 1em;
    border: 1px solid #000; /* everything up to and including this line
                               are aesthetics, adjust to taste */
    outline: none; /* removes the default outline */
    resize: none; /* prevents the user-resizing, adjust to taste */
}

textarea:focus {
    box-shadow: inset 0 0 3px 2px #f90; /* provides a more style-able
                                           replacement to the outline */
}​

JS Fiddle demo.

于 2012-05-21T23:06:50.440 回答
0

textarea:focus{outline:none} should do it, although its pretty hard to answer without seeing it

于 2012-05-21T23:03:47.163 回答