CSS defines a rounded text box, but when it gets focus, it has square corners, which looks ugly_html/css_WEB-ITnose

Defined like this


.grade_text{border-radius:10px;cursor:pointer;text -indent:12px;}
.grade_text:focus{border-radius:10px;cursor:pointer;}
The following are the styles without and with focus


What do you think? When getting focus, let him have rounded corners. I have added .grade_text:focus{border-radius:10px;cursor:pointer;}

Reply to discussion (solution)

outline:none
Try adding this attribute

Remove the outer border.

You defined the rounded text box using css. Then when your text box gets focus, you can also set a rounded border.

outline:none
Try adding this attribute

to remove the outer border.

----------------------------------------------- --------------------------
Thank you very much. Although it is only a small problem, it can reflect your deep knowledge, my friend.