避免文本框边框聚焦? [复制]

Posted

技术标签:

【中文标题】避免文本框边框聚焦? [复制]【英文标题】: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">

【问题讨论】:

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

【讨论】:

这是另一个不错的选择。

以上是关于避免文本框边框聚焦? [复制]的主要内容,如果未能解决你的问题,请参考以下文章

Axure 文本框去掉边框 富文本 粘贴文字图标

Axure 文本框去掉边框 富文本 粘贴文字图标

C#Winform中怎么设置文本框的文本不能被选中,就像QQ登录框那样 不给复制的

下列关于windows文本框的描述不正确的是a文本框内不能添加文本框b文本框内的

easyui如何修改指定必填项下拉文本框边框的颜色?

jQuery中怎样判断文本框是不是聚焦