CSS文本输入表单域设计答案

【问题标题】：CSS text input form field designCSS文本输入表单域设计
【发布时间】：2016-05-03 23:17:18
【问题描述】：

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

<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>

【问题讨论】：

使用 jquery。定义类以添加转换（尽管有焦点仍然存在）。编写一个函数，当有焦点并且有文本时添加一个类。
我们可以使用 CSS 吗？
css 文件不支持条件语句。您还可以研究 sass（““Sass 让 CSS 再次变得有趣。Sass 是 CSS，加上嵌套规则、变量、mixin 等等，所有这些都采用简洁易读的语法”。）但我不确定在太骚了..

标签： html css forms input textinput

【解决方案1】：

我用 jquery 创建了一个类似这样的表单，你可以检查一下。我希望我们可以完美地使用除 css 之外的 jquery。

//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

【讨论】：

【解决方案2】：

您可以通过设置/移除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

【讨论】：

【解决方案3】：

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

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

HTML
   required

以便 css 可以对其进行验证并相应地设置表单样式。

【讨论】：