CSS 文本输入表单域设计

Question

一旦焦点离开，标签就会变回来，我只希望一旦输入文本，尽管有焦点，转换仍然存在，如果没有输入文本，它会变得和之前一样，请帮我添加一段代码让它发生

<html>
<head>
<title>Index</title>
<style>
    body{
        font-family:Calibri;
        background-color:#FFFCD3; 
        height:1000px; 
        width:100%; 
        margin:0;}
    .container{
        padding:60px 0 0 0;
        margin:auto;
        background-color:#B4CDCA;
        height:485px;
        width:460px;}
    h1{
        font-size:36px; 
        padding:5px 50px 5px; 
        border-width:0 0 0 5px; 
        border-style:solid; 
        border-color:red; 
        font-family:Calibri; 
        margin:0px 0px 35px;}
    form div{
        margin:0 60px 50px;
        position:relative;}
    input{
        background-color:transparent; 
        width:100%; 
        height:100%; 
        outline:none; 
        padding:0; 
        margin:0; 
        border-width:0px 0px 2px 0px; 
        font-size:24px;
        line-height:60px;}
    .container button{
        font-family:Calibri; 
        margin:0px 114px; 
        padding:18px 100px; 
        background-color:transparent; 
        border:1px solid red; 
        outline:none;
        font-size:24px;}
    .container label{
        font-size:27px;
        position:absolute;
        top:0;
        line-height:60px;}
    input:focus + label{
        -webkit-transform:translate(-18px,-24px) scale(0.7,0.7);
        transition:ease-in,0.2s;}
</style>
</head>

<body>
<div class="container">
<h1>LOGIN</h1>
<form>
    <div>
    <input type="text" id="username" name="username" value=""/>
    <label for="username">Username</label>
    </div>
    <div>
    <input id="Password" type="password" name="password"/>
    <label>Password</label>
    </div>
    <button>
    GO
    </button>
</form>
</div>
</body>
</html>

Answer 1

我用 jquery 创建了类似这样的表格，您可以检查一下。我希望我们可以完美地完成 jquery 而不是 css.

//material contact form animation
$('.contact-form').find('.form-control').each(function() {
  var targetItem = $(this).parent();
  if ($(this).val()) {
    $(targetItem).find('label').css({
      'top': '10px',
      'fontSize': '14px'
    });
  }
})
$('.contact-form').find('.form-control').focus(function() {
  $(this).parent('.input-block').addClass('focus');
  $(this).parent().find('label').animate({
    'top': '10px',
    'fontSize': '14px'
  }, 300);
})
$('.contact-form').find('.form-control').blur(function() {
  if ($(this).val().length == 0) {
    $(this).parent('.input-block').removeClass('focus');
    $(this).parent().find('label').animate({
      'top': '25px',
      'fontSize': '18px'
    }, 300);
  }
});

检查我的代码笔：http://codepen.io/nikhil8krishnan/pen/gaybLK?editors=1010

Answer 2

您可以通过 setting/removing input 元素上的 value 属性来做到这一点：

JS（PS：这是使用 PrototypeJS）

document.on('keyup', 'form input', function(ev, el) {
    if (!el.value || el.value.replace(/\s+/g, '') === '') {
        el.removeAttribute('value');
    } else {
        el.setAttribute('value', el.value);
    }
});

CSS

input[value] + label, /* <------------ checking for existence of value */
input:focus + label {
  -webkit-transform: translate(-18px, -24px) scale(0.7, 0.7);
  transition: ease-in, 0.2s;
}

FIDDLE

Answer 3

我所要做的就是将其添加到我的代码中

CSS
    input:valid + label {
        -webkit-transform:translate(-18px,-24px) scale(0.7,0.7);
        transition:ease-in,0.2s;}

HTML
   required

以便 css 可以验证它并相应地设置样式。

CSS 文本输入表单域设计

CSS text input form field design

html

css

forms

input

textinput