css - CSS HTML : Rounded corners for selected textarea on Chrome

Question

我正在尝试将带有圆 Angular 的textarea添加到我的网站。

我正在使用此CSS:

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

现在，这在chrome中可以正确显示，但是当文本区域获得焦点时，将向该文本区域添加橙色边框，并且该边框没有圆 Angular 。

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

谢谢

Answer 1

要删除默认的outline，然后使用一种更符合...样式的样式来模仿该轮廓:

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。