Question

我正在尝试在我的网站上添加带圆角的textarea。

我正在使用这个css：

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

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

有关如何解决这个问题的想法吗？

由于

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

Answer 2

textarea:focus{outline:none}应该这样做，虽然没有看到它很难回答

CSS Html：Chrome上选定文本区域的圆角

2 个答案: