Стилизация плейсхолдера в инпуте

How to Style any Input Field – Tips and Techniques – https://medium.com/codex/how-to-style-an-input-field-with-css-only-tips-and-techniques-e6a00e9dcc5
Enter Text
<!-- 
  Пример стилизации input - 
  https://medium.com/codex/how-to-style-an-input-field-with-css-only-tips-and-techniques-e6a00e9dcc50

  

 -->
<!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">
  <title>Document</title>
</head>
<body>
  <div class="wrapper">
    <label class="custom-field">
      <input type="email" placeholder="&nbsp;"/>
      <span class="placeholder">Enter Email</span>
      <span class="error-message" aria-live="polite">The email is invalid</span>
    </label>
    
    <label class="custom-field one">
      <input type="text" placeholder=" "/>
      <span class="placeholder">Enter Text</span>
    </label>
    
    <label class="custom-field two">
      <input type="url" placeholder="&nbsp;"/>
      <span class="placeholder">Enter URL</span>
    </label>
    
    <!-- <label class="custom-field three">
      <input type="password" placeholder="&nbsp;"/>
      <span class="placeholder">Enter Password</span>
      <span class="border"></span>
    </label> -->

    <label class="custom-field four">
      <input type="text" placeholder=" "/>
      <span class="placeholder">Enter Text</span>
    </label>

  </div>
<style>
  body {
    width: 100vw;
    height: 100vh;
    display: flex;
    /* flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: sans-serif;
    font-size: 16px; */
  }

  *, *::before, *::after {
  box-sizing: border-box;
  }

  .wrapper {
    
    display: flex;
  }
  label {
    display: block;
    margin-right: 20px;
  }









  /*  */
  .custom-field .error-message {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 8px;
  font-size: 12px;
  background: #d30909;
  color: #fff;
  height: 24px;
}

.custom-field .error-message:empty {
  opacity: 0;
}

  /* ONE */
  .custom-field.one input {
    background: none;
    border: 2px solid #ddd;
    transition: border-color 0.3s ease;
  }

  .custom-field.one input + .placeholder {
    left: 8px;
    padding: 0 5px;
  }

  .custom-field.one input.dirty,
  .custom-field.one input:not(:placeholder-shown),
  .custom-field.one input:focus {
    border-color: #222;
    transition-delay: 0.1s
  }

  .custom-field.one input.dirty + .placeholder,
  .custom-field.one input:not(:placeholder-shown) + .placeholder,
  .custom-field.one input:focus + .placeholder {
    top: 0;
    font-size: 10px;
    color: #222;
    background: #fff;
    width: auto
  }

  /* TWO */
  .custom-field.two input {
    border-radius: 0;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    background:
      linear-gradient(90deg, #222, #222) center bottom/0 0.15em no-repeat,
      linear-gradient(90deg, #ccc, #ccc) left bottom/100% 0.15em no-repeat,
      linear-gradient(90deg, #fafafa, #fafafa) left bottom/100% no-repeat;
    transition: background-size 0.3s ease;
  }

  .custom-field.two input.dirty,
  .custom-field.two input:not(:placeholder-shown),
  .custom-field.two input:focus {
    background-size: 100% 0.15em, 100% 0.1em, 100%;
  }


  /* FOUR */
  .custom-field.four input {
    border-left: 2px solid black;

  }



  /* THREE */
  .custom-field.three {
    --draw-duration: 0.1s;
    --draw-color: #222;
    --draw-line-width: 2px;
    --draw-easing: linear;
  }

  .custom-field.three .border {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    transform: none;
    display: flex;
    align-items: center;
    padding-left: 12px;
    borde-radius: 3px;
  }

  .custom-field.three .border::after, 
  .custom-field.three .border::before {
    content: "";
    width: 0;
    height: 0;
    display: inline-block;
    position: absolute;
    border-radius: 3px;
  }

  .custom-field.three .border::before {
    left: 0;
    bottom: 0;
    border-right: 0px solid var(--draw-color);
    border-bottom: 0px solid var(--draw-color);
    transition: 
      border 0s linear calc(var(--draw-duration) * 4),
      height var(--draw-duration) var(--draw-easing) calc(var(--draw-duration) * 2),
      width var(--draw-duration) var(--draw-easing) calc(var(--draw-duration) * 3);
  }

  .custom-field.three .border::after {
    right: 0;
    top: 0;
    border-left: 0px solid var(--draw-color);
    border-top: 0px solid var(--draw-color);
    transition: 
      border 0s linear calc(var(--draw-duration) * 2),
      height var(--draw-duration) var(--draw-easing),
      width var(--draw-duration) var(--draw-easing) var(--draw-duration);
  }

  .custom-field.three input:focus ~ .border::before,
  .custom-field.three input:not(:placeholder-shown) ~ .border::before,
  .custom-field.three input.dirty ~ .border::before,
  .custom-field.three input:focus ~ .border::after,
  .custom-field.three input:not(:placeholder-shown) ~ .border::after,
  .custom-field.three input.dirty ~ .border::after {
    width: 100%;
    height: 100%;
    border-width: var(--draw-line-width);
  }

  .custom-field.three input:not(:placeholder-shown) ~ .border::before,
  .custom-field.three input.dirty ~ .border::before,
  .custom-field.three input:focus ~ .border::before {
    transition-delay: 0s, var(--draw-duration), 0s;
  }

  .custom-field.three input:not(:placeholder-shown) ~ .border::after,
  .custom-field.three input.dirty ~ .border::after,
  .custom-field.three input:focus ~ .border::after {
    transition-delay: 
      calc(var(--draw-duration) * 2), 
      calc(var(--draw-duration) * 3), 
      calc(var(--draw-duration) * 2);
  }

</style>

</body>
</html>

<!-- 
/* Video Explanation - https://youtu.be/3AK3vspZvvM */















 -->
Поделиться с друзьями
