This is my 12th day of the Gwen Challenge

First look at the effect:

Preface:

Generally when we want to input the password can let their input password display or hidden, so I made a simple password box ~

Implementation:

  1. Define THE HTML input box label, Kuang as the bottom box, Password as the input box, Conceal as the small eye button:
   <div class="kuang">
       <input type="password" placeholder="Please enter your password......" id='password' > 
       <div class="conceal" id='conceal'></div>
   </div>
Copy the code

Type =”password” defines the mask for the characters in the field. Placeholder =” Please input password……” Provides a prompt that describes the expected value of an input field. The prompt is displayed when the input field is empty and disappears when the field gains focus.

  1. Define basic kuang styles, length, width, shadow and so on:
 .kuang{
            position: relative;
            width: 380px;
            height: 60px;
            border-radius: 5px;
            box-shadow: inset 5px 5px 10px rgba(204.197.197.5),
                        inset -5px -5px 8px rgba(204.197.197.5);
        }
Copy the code
  1. Define the basic style of the input field:
 .kuang input{
            position: absolute;
            top: 0;
            left: 20px;
            height: 100%;
            width: 300px;
            font-size: 18px;
            outline: none;
            border: none;
            background-color:transparent;
        }
        .kuang input::placeholder{
            color: rgba(68.67.67.8);
        }
Copy the code

background-color:transparent; Background color is transparent; ::placeholder allows you to change the color, size, tilt, etc., of the text in the input box. Detailed usage

  1. The eye button style starts with a closed eye image:
.conceal{
            position: absolute;
            top: 15px;
            right: 15px;
            width: 30px;
            height: 30px;
            background-image: url(mima/xianshi.png);
            background-size: 100% 100%;   
            cursor: pointer;
        }
Copy the code
  1. Js implementation, when clicking the small eyes button to judge, by changing the value of type attribute to text or password to realize the character to show or hide the state, the button by adding or removing the new class to show the state of the eye:
<script>
       var password = document.getElementById('password');
       var anniu = document.getElementById('conceal');
       anniu.addEventListener('click'.function(){
           if(password.type==='password')
           {
               password.setAttribute('type'.'text');
               anniu.classList.add('yincang');
           }else{
            password.setAttribute('type'.'password');
               anniu.classList.remove('yincang');
           }
       })
   </script>
Copy the code

The setAttribute() method adds the specified attribute and assigns the specified value to it. ClassList attributes: add(class1, class2,…) Adds one or more class names to the element. If the specified class name already exists, it will not be added. Remove (class1 and class2,…). Removes one or more class names from the element.

  1. Change the picture of small eyes:
 .conceal.yincang{
            background-image: url(mima/yincang.png);
            background-size: 100% 100%; 
        }
Copy the code

Complete code:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>* {margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .kuang{
            position: relative;
            width: 380px;
            height: 60px;
            border-radius: 5px;
           /*  background-color: rgba(204, 197, 197,.5); */
            box-shadow: inset 5px 5px 10px rgba(204.197.197.5),
                        inset -5px -5px 8px rgba(204.197.197.5);
        }
        .kuang input{
            position: absolute;
            top: 0;
            left: 20px;
            height: 100%;
            width: 300px;
            font-size: 18px;
            outline: none;
            border: none;
            background-color:transparent;
        }
        .kuang input::placeholder{
            color: rgba(68.67.67.8);
        }
        .conceal{
            position: absolute;
            top: 15px;
            right: 15px;
            width: 30px;
            height: 30px;
            background-image: url(mima/xianshi.png);
            background-size: 100% 100%;   
            cursor: pointer;
        }
        .conceal.yincang{
            background-image: url(mima/yincang.png);
            background-size: 100% 100%; 
        }
    </style>
</head>
<body>
   <div class="kuang">
       <input type="password" placeholder="Please enter your password......" id='password' > 
       <div class="conceal" id='conceal'></div>
   </div>
   <script>
       var password = document.getElementById('password');
       var anniu = document.getElementById('conceal');
       anniu.addEventListener('click'.function(){
           if(password.type==='password')
           {
               password.setAttribute('type'.'text');
               anniu.classList.add('yincang');
           }else{
            password.setAttribute('type'.'password');
               anniu.classList.remove('yincang'); }})</script>
</body>
</html>
Copy the code

Conclusion:

I find that listening to some pleasant music mood will be better a lot of ~ like me at the moment ~ listen to music, writing articles ~ life may be good ~