html 元素隐藏已经创建的弯曲边框周围的方形框

Posted 2023-05-07

【中文标题】html 元素隐藏已经创建的弯曲边框周围的方形框

【英文标题】：html element hide the square box around the already created curved border

【发布时间】：2015-12-07 10:30:12

【问题描述】：

我有以下用于 textarea 的 css

textarea 
    background: transparent;
    display: inline;
    resize: none;
    margin-top: 1%;
    min-width: 100px;
    height: 38px;
    border: none;
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    font-size: 20px;
    font-weight: normal;
    text-align: center;
    border-radius: 50px;
    box-shadow: 0 0 1pt 1pt #8F4A11;

从图片中可以看出，当我点击文本区域时，框周围会出现一个蓝色边框。我想删除蓝色边框。请问我可以请求指导吗？

【问题讨论】：

相关重复 - Here 和 here... 和 another one here... 只需确保当输入/文本区域处于焦点时有一个明显的指示符，使用 textarea:focus,input:focus /*properties*/

@misterManSam 我不同意。所有链接都集中在box-shadow 上，而我们不能在这里触及box-shadow 属性，因为它是原始样式的一部分。

@asdf - 问题中的蓝色边框来自 Chrome，并以 outline: none 为焦点删除。这在其他问题和here is my example 中有所涉及，使用上面的 CSS 并删除轮廓，同时在焦点上添加不同的颜色框阴影。这不是一个新问题。

谢谢。这些例子在其他地方对我来说很方便。再次感谢您。

【参考方案1】：

将textarea:focus 元素添加到您的样式中并删除border 和outline 属性：

CSS

textarea:focus 
    border: none;
    outline: none;

这是一个jsfiddle 演示

【讨论】：

你好 asdf - 是否可以让框阴影的半径沿着与文本框相同的边界弯曲？