form(class='form' action='' method='POST')
  h1.form__title Регистрация
  
  input(class='form__input' type='text' placeholder='Ваше имя' required)
  input(class='form__input' type='email' placeholder='Ваш email' required)
  input(class='form__input' type='password' placeholder='Пароль (минимум 5 символов)' pattern=".{5,}" required)
  
  input(class='form__submit' type='submit' value='Зарегистрироваться')
View Compiled
$form-width = 480px
$color-invalid = #cf5340
$color-valid = #b4d388

body
  box-sizing border-box
  
  display flex
  align-items center
  justify-content center
  
  min-height 100vh
  padding 0 15px
  
  font-style 16px
  line-height 1.4
  font-family "Helvetica Neue", Helvetica, Arial, sans-serif
  
  color #222
  background #f5f5f5

*
  box-sizing inherit

.form
  display block
  max-width $form-width
  width 100%
  padding 1rem
  
  box-shadow 0 2px 4px rgba(0, 0, 0, .2)
  border 1px solid rgba(0, 0, 0, .2)
  background #fff
  border-radius 3px

  
  &__title
    margin 0
    margin-bottom 30px
    line-height 1
  
  
  &__row
    margin 15px
  
  
  &__input
    display block
    width 100%
    
    margin 15px 0
    
    padding .5rem
    
    background-repeat no-repeat
    background-size 8px
    background-position right .75rem center
    
    outline 0
    border 1px solid #e5e5e5
    transition border-color .15s linear
    
    &:hover
      border-color #c5c5c5
    
    &[required]
      background-image url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNicgaGVpZ2h0PScxNicgdmlld0JveD0nMCA4IDE2IDE2JyBlbmFibGUtYmFja2dyb3VuZD0nbmV3IDAgOCAxNiAxNic+PHN0eWxlIHR5cGU9J3RleHQvY3NzJz4uc3Qwe2ZpbGw6I0YxODI2MDt9PC9zdHlsZT48cGF0aCBjbGFzcz0nc3QwJyBkPSdNNy4yIDE3LjRsLTUuNCAzLjgtMS40LTIuNSA2LTIuNy02LjEtMi44IDEuNC0yLjQgNS40IDMuOC0uNS02LjZoMi43bC0uNSA2LjYgNS40LTMuOCAxLjQgMi40LTYgMi44IDYuMSAyLjgtMS40IDIuNS01LjQtMy44LjUgNi41aC0yLjhsLjYtNi42eicvPjwvc3ZnPg==")
      
      &:focus
        &:invalid
          border-color $color-invalid
          background-image url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48Y2lyY2xlIGZpbGw9IiNDRjUzNDAiIGN4PSI4IiBjeT0iOCIgcj0iOCIvPjwvc3ZnPg==")
        
      &:valid
        border-color $color-valid
        background-image url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48Y2lyY2xlIGZpbGw9IiNCNEQzODgiIGN4PSI4IiBjeT0iOCIgcj0iOCIvPjwvc3ZnPg==")
        
  &__input:invalid ~ .form__submit
    display none

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.