焦点问题上的自定义html输入框
我正在尝试开发一个HTML输入框,如下图所示:
.
我使用以下代码制作:
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;
}<!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>问题:
当我对输入框进行聚焦并开始输入文本时,输入框周围会出现一个蓝色边框,如下图所示.
我必须删除这个蓝色边框.怎么做？
添加outline: 0到你的CSS
input[type=text] :focus
{
border: none;
border-bottom: 1px dashed #D9FFA9;
outline: 0;
}
我要补充的是，这是有目的的，并在输入聚焦时向用户显示 - 最好对其进行样式设置（例如更改颜色），而不是删除它