How to remove the box aorund search icon in css?

Question

I have been created, search icon for my page,

Here is the code:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Animated search Form</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <style>
    html,
    body {
        margin: 0;
        padding: 0;
    }

    .button,
    .overlay input[type="submit"] {
        background: url(http://s18.postimg.org/f4t3rukcl/icon.png) center center no-repeat;
        height: 50px;
        width: 50px;
        position: absolute;
        top: 50px;
        right: 50px;
    }

    .overlay {
        position: absolute;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100vw;
        background: rgba(200, 200, 200, 0.8);
        display: none;
    }

    .overlay input[type="text"] {
        position: absolute;
        top: 50px;
        left: 0;
        height: 50px;
        font-size: 30px;
        width: -webkit-calc(100vw - 100px);
        width: calc(100vw - 100px);
        outline: none;
        background: transparent;
        border: none;
        border-bottom: 2px solid gray;
    }
    </style>
</head>

<body>
    <form action="" autocomplete="on" name="form1" onSubmit="search(document.form1, frametosearch); return false">
        <div class="button"></div>
        <div class="overlay">
            <input type="text" placeholder="enter search and press icon again" id="searchString" />
            <input id="submitSearch" type="submit" value="" />
        </div>
    </form>
    <div class="mainContent">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae
    </div>
    <script>
    $(document).ready(function() {
        $('.button').click(function() {
            $('.overlay').css("display", "block");
            $('.button').css("display", "none");
        });

        $('#submitSearch').click(function() {
            $('.overlay').css("display", "none");
            $('.button').css("display", "block");
        });

    });
    </script>
</body>

</html>

when i click the icon, it shows rectangle box around the icon,

May i know, how to remove?

Thanks,

i tried, it didn't work,, may i know, for which selector? thanks.. — pcs, May 21 '15 at 05:54
Possible duplicate? http://stackoverflow.com/questions/3397113/how-to-remove-border-outline-around-text-input-boxes-chrome — UsainBloot, May 21 '15 at 05:55

score 1 · Answer 1 · edited May 21 '15 at 06:01

1

Add outline: none; and border: none; to the .overlay input[type="submit"] selector

edited May 21 '15 at 06:01

pcs

1,864
4
25
49

answered May 21 '15 at 05:56

Geoff Warren

414
3
10

Vinod VT · Answer 2 · 2015-05-21T06:02:40.350

1

Add

.overlay input[type="submit"] {
   border : 0;
}

See jsfiddle

edited May 21 '15 at 06:02

answered May 21 '15 at 05:57

Vinod VT

6,946
11
51
75

score 1 · Answer 3 · answered May 21 '15 at 05:58

1

It is because you make input type submit. Use border:none will solved your issue.

.button, .overlay input[type="submit"]{
    border:none;
}

Check Fiddle

answered May 21 '15 at 05:58

ketan

19,129
42
60
98

score 1 · Answer 4 · answered May 21 '15 at 05:59

1

.overlay input[type="submit"],  .overlay input[type="submit"]:focus {
   outline: none;
   border: none;
}

answered May 21 '15 at 05:59

UsainBloot

816
6
20

Bilal Maqsood · Answer 5 · 2015-05-21T07:13:50.777

0

it will work

input[type="submit"]:focus {
   outline: none;
   border: none; // remove the border of the text field 
}

edited May 21 '15 at 07:13

answered May 21 '15 at 06:04

Bilal Maqsood

1,163
3
15
43

it will remove the border of text field – Bilal Maqsood May 21 '15 at 06:59

How to remove the box aorund search icon in css?

5 Answers5