摆脱圆角框周围的矩形[重复]

Posted 2023-02-22

【中文标题】摆脱圆角框周围的矩形[重复]

【英文标题】：get rid of rectangle around rouded boxes [duplicate]

【发布时间】：2017-06-24 12:59:03

【问题描述】：

我的 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/

【参考方案1】：

只需删除轮廓

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

【参考方案2】：

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

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

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

【参考方案3】：

当文本区域被聚焦时使用：outline: none

  textarea:focus
    outline: none;

【参考方案4】：

这是textarea 的轮廓出现在focus 上，只需在.Textareausermsg 上设置outline:0;

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

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

【参考方案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/

【参考方案6】：

这是您问题的解决方案。

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