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;
}

DavGarcia · Accepted Answer · 2010-04-04 02:49:22Z

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;
}

answered Apr 4, 2010 at 2:49

DavGarcia

18.9k14 gold badges62 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

DavGarcia Over a year ago

Does IE6 even have a text box highlight that would need to be removed?

Collectives™ on Stack Overflow

rounded textbox css

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related