如何建立一个类似于谷歌的搜索框 - 带有圆角
[英]How to build a search box similar to google - with rounded corners
问题描述
我创建了一个类似于谷歌搜索框的搜索框。 但是我遇到的问题是，当我单击搜索框时，我会得到矩形框和圆角文本框。 如何摆脱它。 谁来帮帮我。 [![这就是搜索框的样子。][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', '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(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
2 个解决方案
解决方案1
2 2020-09-24 04:42:34
在你的 css 中试试这个。
.text_input input:focus {
outline: none;
}
解决方案2
0 2020-09-24 04:52:19
使用焦点到 CSS 中的input
input:focus{
outline: none;
box-shadow: none;
}
如何在Bootstrap中删除选择框的圆角？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.