如何解决如何建立一个类似于谷歌的搜索框-圆角
我创建了一个类似于Google搜索框的搜索框。但是我遇到的问题是，当我单击搜索框时，出现矩形框以及圆角文本框。如何摆脱它。有人帮我。 [！[这就是搜索框的外观。] [1]] [1] [！[但是，当我单击它时，在它上面得到一个矩形框。如何摆脱这个错误？] [2]] [2]
我的代码：
.text_input input[type="text"] {
position: absolute;
left: 50%;
transform: translateX(-50%);
margin: 250px 0;
width: 500px;
height: 35px;
border-radius: 25px;
border: 3px grey solid;
font-size: 20px;
padding: 5px;
}
.text_input input:focus {
background-color: grey;
}
.text_input:hover {
background-color: khaki;
border-radius: 25px;
}
.search_box input[type="submit"] {
text-align: center;
color: black;
font-weight: 300;
font-family: 'Lucida Sans','Lucida Sans Regular','Lucida Grande','Lucida Sans Unicode',Geneva,Verdana,sans-serif;
font-size: medium;
font-style: normal;
background-color: yellowgreen;
position: absolute;
left: 50%;
transform: translateX(-130%);
margin: 320px 0;
padding:10px 10px;
border-radius: 5px;
}
.lucky input[type="submit"]{
text-align: center;
color: black;
font-weight: 300;
font-family: 'Lucida Sans',sans-serif;
font-size: medium;
font-style: normal;
background-color: yellowgreen;
position: absolute;
left: 50%;
transform: translateX(20%);
margin: 320px 0;
padding: 10px 10px;
border-radius: 5px;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Search</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form action="https://google.com/search">
<div class="text_input">
<input type="text" name="q">
</div>
<div class="search_box">
<input type="submit" value="Google Search">
</div>
</form>
<form action="https://www.google.com/doodles/">
<div class="lucky">
<input type="submit" value="I'm Feeling Lucky">
</div>
</form>
</body>
</html>帮我找到解决方案！ [1]：https://i.stack.imgur.com/fuchm.png [2]：https://i.stack.imgur.com/H0LTr.png
解决方法
在CSS中尝试此操作。
.text_input input:focus {
outline: none;
}
对CSS中的input使用 focus
input:focus{
outline: none;
box-shadow: none;
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。