Question

我正在尝试开发一个HTML输入框，如下图所示：

我使用以下代码

制作了它

＆＃13;

input[type=text] {
    background: transparent;
    border: none;
    border-bottom: 1px solid #000000;
     padding: 2px 5px;
}
input[type=text]:focus
{
    border: none;
    border-bottom: 1px dashed #D9FFA9;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

  Name :  <input type="text" />
  
</body>
</html>

＆＃13;

ISSUE：
这里当我对输入框进行聚焦并开始输入文本时，输入框周围会出现一个蓝色边框，如下图所示。

我必须删除此蓝色边框。怎么做？

Answer 1

将outline: 0添加到您的css

input[type=text] :focus
{
    border: none;
    border-bottom: 1px dashed #D9FFA9;
    outline: 0;
}

我将补充说，这是出于某种目的，并在输入聚焦时向用户显示 - 对它进行样式设置（例如更改颜色），而不是将其删除

Answer 2

在outline: none;中将input:focus添加到您的CSS中请注意input[type=text]: focus应为input[type=text]:focus。

请在此处查看更新的代码段：

＆＃13;

input[type=text] {
    background: transparent;
    border: none;
    border-bottom: 1px solid #000000;
    padding: 2px 5px;
}
input[type=text]:focus
{
    border: none;
    border-bottom: 1px dashed #D9FFA9;
    outline: none;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

  Name :  <input type="text" />
  
</body>
</html>

＆＃13;

希望这有帮助！：）

Answer 3

删除input[type=text]和:focus

之间的空白区域

并将outline: none;添加到input[type=text]:focus

input[type=text] {
    background: transparent;
    border: none;
    border-bottom: 1px solid #000000;
     padding: 2px 5px;
}
input[type=text]:focus
{
    border: none;
    border-bottom: 1px dashed #D9FFA9;
    outline: none;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

  Name :  <input type="text" />
  
</body>
</html>

Answer 4

只需添加

outline:0;

或

outline:none;

在你的css :)

Answer 5

在您的CSS中outline:0添加了outline:none或input[type="text"]:focus。

input[type="text"]:focus{
   outline:none
}

焦点问题

5 个答案: