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

Question

I'm trying to add a textarea with rounded corners to my site.

I'm using this css:

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

Right now this shows correctly in chrome, however when the textarea gets the focus, an orange border is added to the textarea and such border doesn't have rounded corners.

Any idea on how to fix this?

Thanks

Answer 1

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 .

Answer 2

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