How is it right to put CSS in a focus?



  • I'd like to get pressed. inputlabel raised at 20px, provided that html remained as an example, only sss could be changed. If you could remove the span, it would work, but you can't clean it.

    .contact-form form label input:focus ~ label,
    .contact-form form label input:valid ~ label,
    .contact-form form label textarea:focus ~ label,
    .contact-form form label textarea:valid ~ label {
      top: -20px;
    }
    <div class="contact-form">
      <form>
        <div class="section-contacts">
          <label>
            <span><input type="text" name="companyName" required /></span>
            <label>Company Name</label>
          </label>
          <label>
            <span><input type="text" name="phone" required /></span>
            <label>Telephone Number</label>
          </label>
        </div>
      </form>
    </div>



  • Only css, fully retained

    .section-contacts > label {
      display: inline-block;
      vertical-align: middle;
    }
    

    input {
    margin-top: 20px;
    position: relative;
    top: 0;
    transition: margin .3s linear, top .3s linear;
    }

    input:focus {
    margin-top: 0;
    margin-bottom: 20px;
    top: 20px;
    }

    <div class="contact-form">
    <form>
    <div class="section-contacts">
    <label>
    <span><input type="text" name="companyName" required /></span>
    <label>Company Name</label>
    </label>
    <label>
    <span><input type="text" name="phone" required /></span>
    <label>Telephone Number</label>
    </label>
    </div>
    </form>
    </div>

    The shamanship with the displacement of the baseline, which is default equated inline-block'i. Modification of input'a reversals the baseline, and the input itself, through a relative visual, goes to the old place. The outer containers are flat down the centre, the height is not changing, so they are not moving anywhere. Somehow:


Log in to reply
 


Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2