HIGHLIGHTING INPUT BOX ON CURSOR USING HTML AND CSS

This tutorial is tells about the Highlighting Input Box On the Cursor Using HTML and CSS

 

HIGHLIGHTING THE INPUT BOX ON CURSOR USING HTML AND CSS

  • Highlighting  Input Box cursor using HTML and CSS is used to highlighting the input box.
  • It reduces the errors.

HTML :

  • HTML is used to create a website
  • Hypertext Markup Language.
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Highlighting the Input </title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="form-container">
        <label for="clientname">Clientname:</label>
        <input type="text" id="clientname" name ="clientname" class="highlight">
        
        <label for="address">Address:</label>
        <input type="address" id="address" name="address" class="highlight">
    </div>
</body>
</html>

 

CSS Code :

body {
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80vh;
    margin: 0;
}

.form-container {
    background-color: #fff;
    padding: 20px;
    border: 2px solid #ddd;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-radius: 8px;
    width: 300px;
}

label {
    display: block;
    margin-bottom: 10px;
    font-weight: bolder;
}

input {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #eee;
    border-radius: 4px;
    box-sizing: border-box;
    transition: border-color 0.3s, box-shadow 0.3s;
}

input:focus {
    border-color: #a72874; 
    box-shadow: 0 0 8px rgb(167, 40, 116);
    outline: none;
}

 

  • The  Clientname and Address is highlighted with the magenta.
  • It is the combination of  red and purple.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top