1. 程式人生 > >bootstrap-MDB input 基本css & js

bootstrap-MDB input 基本css & js

bootstrap label ttr map put define back fin idt

HTML*****************************

<div class="row">
  <div class="col-md-6 mb-r">
    <div class="md-form">
      <input class="form-control" type="text">
      <label for="" class="">通過率</label>
    </div>
  </div>
</div>

<style>*****************************

@media (min-width: 992px){
    .mb-r {
      margin-bottom: 3rem!important;
    }
}

.md-form {
position: relative;
margin-bottom: 1.8rem;
}
input[type=date], input[type=datetime-local], input[type=email], input[type=number], input[type=password], input[type=search-md], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], textarea.md-textarea {
background-color: transparent;
border: none;
border-bottom: 1px solid #bdbdbd;
border-radius: 0;
outline: 0;
height: 2.1rem;
width: 100%;
font-size: 1rem;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-box-sizing: content-box;
box-sizing: content-box;
-webkit-transition: all .3s;
transition: all .3s;
}
input{
font: inherit;
margin: 0;
}

input[type=date]+label:after, input[type=datetime-local]+label:after, input[type=email]+label:after, input[type=number]+label:after, input[type=password]+label:after, input[type=search-md]+label:after, input[type=search]+label:after, input[type=tel]+label:after, input[type=text]+label:after, input[type=time]+label:after, input[type=url]+label:after, textarea.md-textarea+label:after {
display: block;
content: "";
position: absolute;
top: 65px;
opacity: 0;
-webkit-transition: .2s opacity ease-out,.2s color ease-out;
transition: .2s opacity ease-out,.2s color ease-out;
}
input[type=date]+label:after, input[type=datetime-local]+label:after, input[type=email]+label:after, input[type=number]+label:after, input[type=password]+label:after, input[type=search-md]+label:after, input[type=search]+label:after, input[type=tel]+label:after, input[type=text]+label:after, input[type=time]+label:after, input[type=url]+label:after, textarea.md-textarea+label:after {
display: block;
content: "";
position: absolute;
top: 65px;
opacity: 0;
-webkit-transition: .2s opacity ease-out,.2s color ease-out;
transition: .2s opacity ease-out,.2s color ease-out;
}
.md-form label {
-webkit-transition: .2s ease-out;
transition: .2s ease-out;
color: #757575;
position: absolute;
top: .8rem;
left: 0;
font-size: 1rem;
cursor: text;
}
.md-form label.active{
transform: translateY(-140%);
font-size: .8rem;
}
.form-control:focus{
background: 0 0;
}
input[type=text]:focus:not([redonly]){
border-bottom: 1px solid #4285f4;
box-shadow: 0 1px 0 0 #4285f4;
}
input[type=text]:focus:not([redonly])+label{
color: #4285f4;
}

</style>

js********************************************

<script>

  $(function(){
    var input_selector = ["text", "password", "email", "url", "tel", "number", "search", "search-md"].map(function (selector) {

              return "input[type=" + selector + "]";
            }).join(", ") + ", textarea";

    $(document).on(‘focus‘, input_selector, function (e) {

      $(e.target).siblings(‘label, i‘).addClass(‘active‘);
    });

    $(document).on(‘blur‘, input_selector, function (e) {

      var $this = $(e.target);
      // var noValue = !$this.val();
      // var invalid = !e.target.validity.badInput;
      // var noPlaceholder = $this.attr("placeholder") === undefined;

      // if (noValue && invalid && noPlaceholder)
      $this.siblings(‘label, i‘).removeClass(‘active‘);
      //
      // validate_field($this);
    });

  })

</script>

bootstrap-MDB input 基本css & js