输入文本

Question

当输入文本为焦点时，如何进行占位符样式，占位符仍然可见，字体大小变小。例如：

我只需要webkit支持。 webkit是否支持这样的事情？

Answer 1

.input {
  width: 200px;
  height: 35px;
  outline:0;
  padding:0 10px;
}
.label { position: absolute;
  pointer-events: none;
  left: 20px;
  top: 18px;
  transition: 0.2s ease all;
}
input:focus ~ .label,
input:not(:focus):valid ~ .label{
  top: 10px;
  bottom: 5px;
  left: 20px;
  font-size: 12px;
}

<div>
  <input type="text" class="input" required/>
  <span class="label">Company Name</span>
</div>

Answer 2

您需要使用label元素并相应地进行修改。试试这个：

function fillClass() {
  if ($(this).val() != '')
    $(this).parent().addClass('input--filled');
  else
    $(this).parent().removeClass('input--filled');
}


$(".sign-in-input").focusout(fillClass);

.sign-in-input-ctr {
  width: 100%;
  display: inline-block;
  vertical-align: top;
  margin-bottom: 25px;
  position: relative;
  margin-top: 50px;
}
.sign-in-input {
  width: 100%;
  border: 2px solid transparent;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  height: 38px;
  background-color: #fff;
  outline: none;
  border: 1px solid rgba(73, 73, 73, 0.2);
  border-radius: 2px;
  padding-left: 10px;
}
.sign-in-input:focus,
.input--filled .sign-in-input {
  background-color: transparent;
  border: 1px solid #a09e9e;
}
.sign-in-label {
  width: 100%;
  font-size: 12px;
  position: absolute;
  top: -18px;
  pointer-events: none;
  overflow: hidden;
  padding: 0 15px;
  left: 0;
  -webkit-transform: translate3d(0, 30px, 0);
  transform: translate3d(0, 30px, 0);
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
}
.sign-in-input:focus+.sign-in-label,
.input--filled .sign-in-label {
  -webkit-transform: translate3d(-15px, 0, 0);
  transform: translate3d(-15px, 0, 0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sign-in-input-ctr">
  <input class="sign-in-input" type="text" name="email">
  <label class="sign-in-label" for="signin-email"><span class="input-label-content">Email</span>
  </label>
</div>

Answer 3

//------ contact us dropdown list
$(document).ready(function(){
$( ".form-group .form-control" ).focus(function() {
  $(this).parent().addClass('inputFous');
}).blur(function() {
    if($.trim($(this).val()) == '')
    {
        $(this).parent().removeClass('inputFous');  
    }       
});
});

我认为没有webkit支持，请查看此代码，它将对您有所帮助： - Jsfiddle