How To Change HTML Inputs Background Color Using CSS

admin_img Posted By Bajarangi soft , Posted On 05-11-2020

Using CSS we can change background of input field on click of it .So today we discuss how to do it.

How To Change HTML Inputs Background Color Using CSS

Complete Code For Changing HTML Inputs Background Color Using CSS.
Create Index.html and implement below code in it.

<!DOCTYPE html>
<html>
<head>
    <title>How To Change HTML Inputs Background Color Using CSS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>

</head>
<style>
    body {
        background: #c7254e;
    }
    #f1 input[type=text] {
        width: 100%;
        padding: 12px 20px;
        margin: 8px 0;
        box-sizing: border-box;
        border: 1px solid #555;
        outline: none;
    }
    #f1 input[type=text]:focus {
        background-color: lightblue;
    }
    #f2 input[type=text] {
        width: 100%;
        padding: 12px 20px;
        margin: 8px 0;
        box-sizing: border-box;
        border: 3px solid #ccc;
        -webkit-transition: 0.5s;
        transition: 0.5s;
        outline: none;
    }
    #f2 input[type=text]:focus {
        border: 3px solid #555;
    }
    .div1{
        padding: 10px;
    }
</style>
<body>
<br/><br/>
<div class="container">
    <br>
    <div class="text-center">
        <h1 id="color" style="color: white;">Change HTML Inputs Background Color Using CSS</h1>
    </div>
    <br>
    <div class="well">
        <form id="f1">
            <label for="fname">First Name</label>
            <input type="text" id="fname" name="fname" autocomplete="off">
            <label for="lname">Last Name</label>
            <input type="text" id="lname" name="lname">
        </form>
        <form id="f2">
            <label for="fname">First Name</label>
            <input type="text" id="fname" name="fname">
            <label for="lname">Last Name</label>
            <input type="text" id="lname" name="lname">
        </form>
      <div class="div1">
          <p>This Is Paragraph</p>
          <p>This Is Another Paragraph</p>
      </div>
    </div>
    <br>
</div>
</body>
</html>

Related Post