cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <section class="page">
  
  <header class="splash">
    <h1>Form field toggle</h1>
    <p class="intro">Toggle password hide/show with progressive enhancement, while ensuring only a password field is actually submitted as part of the form. Toggle is only displayed if JS enabled.</p>
    <p class="intro">Click/tap the <i class="fa fa-eye"></i> symbol to toggle password.</p>
  </header>
  
  <form class="form js-form">
    <fieldset>
      <legend class="form__legend">Password field visibility</legend>
      <div class="form__field">
        <label class="form__label" for="form-password">Enter password</label>
        <input type="password" class="js-password form__element form__password" id="form-password" />
      </div>
      <input type="submit" class="js-submit form__button" value="Set Password">
    </fieldset>
  </form>
</section>
            
          
!
            
              $namespace: "form";

$color-page-bg: #7a8d20;
$color-field-fg:  lighten(#7a8d20, 20%);

// Mixing to make breakpoints a little easier. Can be expanded with any breakpoints as needed.
@mixin breakpoint() {
  @media (min-width: 48rem)  { @content ; }
}

.#{$namespace} {
  
  padding: 20px;
  background-color: darken($color-page-bg, 25%);
  border-radius: 6px;
  font-size: 20px;
  color: $color-page-bg;
  
  &__field {
    position: relative;
  }
  
  &__legend {
    display: block;
    padding-bottom: 20px;
    line-height: 1.5;
    font-weight: bold;
    
    &:before {
      display: block;
      content: "";
      width: 30px;
      height: 4px;
      margin-bottom: 20px;
      border-radius: 4px;
      background-color: $color-page-bg;
    }
  }
    
  &__label {
    display: block;
    padding-bottom: 4px;
    font-size: 12px;
  }

  &__password {
    display: inline-block;
    font-size: 20px;
    font-family: 'Overpass Mono', monospace;
    padding: 10px;
    background-color: transparent;
    border: 1px dotted $color-page-bg;
    color: $color-field-fg;
    outline: none;
    margin: 0;
  }
  
  &__button {
    display: block;
    width: 100%;
    margin-top: 20px;
    padding: 10px 40px;
    background-color: $color-page-bg;
    border: 0;
    border-radius: 4px;
    font-family: 'Overpass Mono', monospace;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    
    &:hover {
      background-color: lighten($color-page-bg, 10%);
    }
  }
  
  // Injected via JS
  &__toggle {
    display: block;
    
    @include breakpoint {
      position: absolute;
      top: 0;
      right: 0;
    }
  }
    
  &__toggle-button {
    transition: 0.3s;
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    color: $color-page-bg;

    &:hover {
      color: lighten($color-page-bg, 10%);
    }
  }
}

// Cosmetics

body {
  background-color: $color-page-bg;
  font-family: 'Overpass Mono', monospace;
  padding: 20px;
}

.page {

  @include breakpoint {
    display: flex;
    max-width: 800px;
  }
}

.intro {
  padding: 20px;
  line-height: 1.5;
}

.splash {

  @include breakpoint {
    width: 70%;
  }
  
  h1 {
    padding: 20px;
    font-size: 32px;
    font-weight: bold;
    
    &:before {
      display: block;
      content: "";
      width: 30px;
      height: 4px;
      margin-bottom: 20px;
      border-radius: 4px;
      background-color: darken($color-page-bg, 25%);
    }
  }
}
            
          
!
            
              $( function() {
  // Cache our jquery elements
  var $form = $(".js-form");
  var $submit = $(".js-submit");
  var $field = $(".js-password");
  var _template = "<a href='#' class='js-password-toggle form__toggle'><i class='fa fa-eye form__toggle-button'></a>";
  
  // Inject the toggle button into the page
  $field.after( _template );
  
  // Cache the toggle button
  var $toggle = $(".js-password-toggle");
  
  // Toggle the field type
  $toggle.on("click", function(e) {
    e && e.preventDefault();
    if ($field.attr("type") == "password") {
      $field.attr("type","text");
      $(e.target).removeClass("fa-eye").addClass("fa-eye-slash");
    } else {
      $(e.target).removeClass("fa-eye-slash").addClass("fa-eye");
      $field.attr("type","password");
    }

  });
  
  // Set the form field back to a regular password element
  $submit.on( "click", function(e) {
    e && e.preventDefault();
    $field.attr("type","password");
  });
  
  // Stop the form submitting so that we can test it (remove this in a real form):
  $form.submit( function(e) {
    e && e.preventDefault();
    console.log( "Form submitted" );
  });
  
})
            
          
!
999px
Loading ..................

Console