Question

我的html中有一个文本区域，这有圆角。但是当我在文本区域内单击时，它会在圆角边缘显示一个矩形。

以下是我的HTML。

<textarea placeholder="Enter Text Here..." id="usermsg" class="Textareausermsg" onclick="TextAreaToggle()" style="margin: 0px 0px 0px -50px; width: 490px; height: 41px;"></textarea>

这是我的CSS

.Textareausermsg {
    border-radius: 15px;
    font-size: 15px;
    text-align: left;
    line-height: 34px;
}

工作小提琴https://jsfiddle.net/jrss9192/1/

Answer 1

删除大纲

.Textareausermsg {
    border-radius: 15px;
    font-size: 15px;
    text-align: left;
    line-height: 34px;
    outline: 0;
}

Answer 2

您看到的矩形是浏览器默认大纲。虽然删除浏览器默认样式不是一个好主意，但可以通过声明outline：none;

来完成

＆＃13;

.Textareausermsg {
    border-radius: 15px;
    font-size: 15px;
    text-align: left;
    line-height: 34px;
    outline: none;
}

＆＃13;

<textarea placeholder="Enter Text Here..." id="usermsg" class="Textareausermsg" style="margin: 0px 0px 0px -50px; width: 490px; height: 41px;"></textarea>

＆＃13;

Answer 3

当textarea聚焦时使用：outline: none

  textarea:focus{
    outline: none;
}

Answer 4

textarea的{{1}}大纲显示在focus outline:0;

上.Textareausermsg

＆＃13;

.Textareausermsg {
    border-radius: 15px;
    font-size: 15px;
    text-align: left;
    line-height: 34px;
    outline:0;
}

＆＃13;

<textarea placeholder="Enter Text Here..." id="usermsg" class="Textareausermsg" style="width: 260px; height: 41px;"></textarea>

＆＃13;

Answer 5

矩形区域称为“轮廓”，它是一个css属性。尝试在您的css代码中添加outline: none;以将其删除。

如果在单击/聚焦元素时需要“蓝色边框”，请尝试使用

.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/

Answer 6

以下是您问题的解决方案。

 .Textareausermsg {
        border-radius: 15px;
        font-size: 15px;
        text-align: left;
        line-height: 34px;
        outline: none;
    }
    .Textareausermsg :active , .Textareausermsg :focus { outline:none}

摆脱粗糙的盒子周围的矩形

6 个答案: