Question

I have a text field on a page and i have set the autofocus on, so that the cursor is placed to type in the text field, my problem is this…

I have set a border-radius set to 30px so that the text field appears a little more smart in the browser, more friendly on the eye, however the automatic autofocus doesnt take into account the curved edges and highlights the text field as a rectangle, which looks stupid.

Is there a way by using CSS that this can be altered so that the autofocus highlights the curved text field as opposed to a square edged one which is the default?

Thanks

Answer 1

input[type='text']:focus{
 border-radius:30px;
 outline:none;
}​

<input type="text" autofocus="true"/>​

DEMO