CSS Html：Chrome上選定文本區域的圓角

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小提琴演示 。

Answer 2

textarea:focus{outline:none}應該這樣做，雖然沒有看到它很難回答