避免文本框边框聚焦？ [复制]答案

【问题标题】：Avoid textbox Border onfocus? [duplicate]避免文本框边框聚焦？ [复制]
【发布时间】：2017-06-03 00:15:08
【问题描述】：

文本框border-style 被初始化为none。但是onfocus边框出现在textBox上。那么，如何避免出现边框呢？

input[type="text"]{
  
   border-style : none;
   box-shadow :  0 0 0 0;
   height : 3em;
   width : 20em;
 }

::-webkit-input-placeholder { 
  font-size : 16pt;
}

::-moz-placeholder { 
  font-size : 16pt;
}

<label for='text'>Enter some text</label><br>

<input type="text" placeholder="Enter text here">

【问题讨论】：

标签： css

【解决方案1】：

这里有办法，应该添加outline : none; 以实现：

input[type="text"]{
  
   border-style : none;
   box-shadow :  0 0 0 0;
   height : 3em;
   width : 20em;
   outline : none;
 }

::-webkit-input-placeholder { 
  font-size : 16pt;
}

::-moz-placeholder { 
  font-size : 16pt;
}

<label for='text'>Enter some text</label><br>

<input type="text" placeholder="Enter text here">

【讨论】：

【解决方案2】：

为此设置大纲为无。

input:focus{
    outline: none;
}

示例 sn-p。

<!DOCTYPE html>
<html>

<head>
    <style>
        input {
            border: none;
        }
        
        input:focus {
            outline: none;
        }
    </style>
</head>

<body style="font-family:sans-serif">
    <label for='text'>Enter some text</label>
    <br>

    <input type="text" placeholder="Enter text here">
</body>

</html>

【讨论】：

这是另一个不错的选择。