Home  >  Article  >  Web Front-end  >  CSS defines a rounded text box, but when it gets focus, it has square corners, which looks ugly_html/css_WEB-ITnose

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

WBOY
WBOYOriginal
2016-06-24 11:58:221336browse

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.
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn