Cookies Consent

This website uses cookies to ensure you get the best experience on our website.

Learn More

icon inside input field css

icon inside input button css icon inside input field css icon inside input css blogspot icon inside button css icon inside input css css blogspot css
1 min read

 html code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
    />
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="search">
            <i class="fa-solid fa-search"></i>
            <input type="text" class="input">
        </div>
    </div>
</body>
</html>


css code:

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    background-color: rgb(171, 103, 235);
    display: flex;
    justify-content: center;
}

.input {
    width: 60vh;
    height: 8vh;
    border-radius: 10vh;
    padding-left: 7vh;
    font-size: 3.5vh;
    border: none;
    outline: none;
}

.search {
    margin-top: 6vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fa-search {
    position: relative;
    left: 6vh;
}

Labels : #css ,

Post a Comment