bootstrap-MDB input 基本css & js

Posted 2020-10-20 adolfvicto

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>