关于html:摆脱圆形框周围的矩形

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>


这就是textarea的提纲出现在focus上,刚刚把outline:0;放在.Textareausermsg上。

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>


用途:当文本区域聚焦时,使用outline: none

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代码中添加outline: none;以删除它。

如果在单击/聚焦元素时需要"蓝色边框",请尝试此操作

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/