如何建立一个类似于谷歌的搜索框-圆角

编程问答 2022-06-12

问题描述

我创建了一个类似于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;
}
htmlsearchbarsearchbartextboxtextbox