get rid of rectangle around rouded boxes
本问题已经有最佳答案,请猛点这里访问。
我的HTML中有一个文本区域,这个区域有圆角。但是当我在文本区域内单击时,它显示了一个围绕圆形边缘的矩形。
下面是我的HTML。
1 | <textarea placeholder="Enter Text Here..." id="usermsg" class="Textareausermsg" onclick="TextAreaToggle()" style="margin: 0px 0px 0px -50px; width: 490px; height: 41px;"></textarea> |
这是我的CSS
1 2 3 4 5 6 | .Textareausermsg { border-radius: 15px; font-size: 15px; text-align: left; line-height: 34px; } |
号
工作小提琴https://jsfiddle.net/jrss9192/1/
只需删除大纲
1 2 3 4 5 6 7 | .Textareausermsg { border-radius: 15px; font-size: 15px; text-align: left; line-height: 34px; outline: 0; } |
您看到的矩形是浏览器默认轮廓。虽然删除浏览器默认样式不是一个好主意,但是可以通过声明outline来完成:none;
1 2 3 4 5 6 7 | .Textareausermsg { border-radius: 15px; font-size: 15px; text-align: left; line-height: 34px; outline: none; } |
1 | <textarea placeholder="Enter Text Here..." id="usermsg" class="Textareausermsg" style="margin: 0px 0px 0px -50px; width: 490px; height: 41px;"></textarea> |
。
这就是
1 2 3 4 5 6 7 | .Textareausermsg { border-radius: 15px; font-size: 15px; text-align: left; line-height: 34px; outline:0; } |
1 | <textarea placeholder="Enter Text Here..." id="usermsg" class="Textareausermsg" style="width: 260px; height: 41px;"></textarea> |
。
用途:当文本区域聚焦时,使用
1 2 3 | textarea:focus{ outline: none; } |
号
这是你问题的答案。
1 2 3 4 5 6 7 8 | .Textareausermsg { border-radius: 15px; font-size: 15px; text-align: left; line-height: 34px; outline: none; } .Textareausermsg :active , .Textareausermsg :focus { outline:none} |
矩形区域称为"outline",它是一个css属性。尝试在CSS代码中添加
如果在单击/聚焦元素时需要"蓝色边框",请尝试此操作
1 2 3 4 5 6 7 8 9 10 11 | .Textareausermsg { border-radius: 15px; font-size: 15px; text-align: left; line-height: 34px; outline: none; } .Textareausermsg:focus, .Textareausermsg:active { border:1px solid blue; } |
。
https://jsfiddle.net/jrss9192/2/