Lorem ipsum dolor sit amet, consectetur adipiscing elit. Test link

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

 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;
}

Post a Comment

NextGen Digital Welcome to WhatsApp chat
Howdy! How can we help you today?
Type here...