gpt4 book ai didi

html - 关于焦点问题的自定义 html 输入框

转载 作者:太空狗 更新时间:2023-10-29 15:44:22 24 4
gpt4 key购买 nike

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

Normal input .

我使用以下代码制作它:

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>

问题:
在这里,当我聚焦输入框并开始输入文本时,输入框周围会出现一个蓝色边框,如下图所示。

我必须删除这个蓝色边框框。怎么做?
enter image description here

最佳答案

outline: 0 添加到您的 css

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

我要补充的是,这是有目的的,并在输入聚焦时向用户显示 - 最好对其进行样式设置(例如更改颜色),而不是将其删除

关于html - 关于焦点问题的自定义 html 输入框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35520065/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com