rounded textbox css

Question

I found this code from here: http://www.cssportal.com/form-elements/text-box.htm But the problem is you can still see the rectangular shape of the textbox whenever you click inside it. What would be the fix for this? So that the highlight will go with the image with rounded corners

/* Rounded Corner */
.tb5 {
    background: url(images/rounded.gif) no-repeat top left;
    height: 22px;
    width: 230px;
}
.tb5a {
    border: 0;
    width:220px;
    margin-top:3px;
}

Answer 1

This should only occur in some browsers such as Google Chrome, it is meant to help with usability and accessibility but it can cause issues with some styling. What you want to do is remove the dynamic outlines like this:

input[type="text"] { 
    outline: none;
} 

In addition, you can try highlighting the text box still by including a background image change using a psedo-selector like :focus

input[type="text"]:focus { 
    background: url(images/rounded-focused.gif) no-repeat top left;
}