CODEWITHSUNDEEP
htmlcsstextboxsearchbar
tinu
tinu

Reputation: 23

How to build a search box similar to google - with rounded corners

I created a search box similar google search box. But the problem I run throught is, when i click the search box I get rectangle shaped box along with the rounded corner text box. How to get rid of it. Someone help me. [![This is how the search box looks like.][1]][1] [![But, when i click on it, I get a rectangle box over it. How to get rid of this error?][2]][2]

My Code:

.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>

Help me to find a solution for this! [1]: https://i.sstatic.net/fuchm.png [2]: https://i.sstatic.net/H0LTr.png

Upvotes: 0

Views: 3657

Answers (2)

Anshu Bharti
Anshu Bharti

Reputation: 49

Use focus to the input in CSS

input:focus{
  outline: none;
  box-shadow: none;
}

Upvotes: 0

Becky
Becky

Reputation: 5585

Try this in your css.

.text_input input:focus {
    outline: none;
}

Upvotes: 2

Related Questions