logo标签列表

CSS文本输入表单字段设计

htmlcssformsinputtextinput
3
一旦焦点离开，标签就会恢复原样。我希望输入文本后，即使失去焦点，转换也能保持不变；如果没有输入文本，则恢复为以前的状态。请帮忙添加一段代码，以实现这一点。
<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。定义类以添加转换（保持焦点状态）。编写一个函数，在焦点和有文本时添加类。 - SuperNova
我们能用CSS做到吗？ - Snehil Gupta
css文件不支持条件语句。你也可以了解一下Sass（“Sass让CSS变得有趣。Sass是CSS，加上嵌套规则、变量、混合等等，所有这些都使用简洁易读的语法。”），但我不确定Sass的限制是什么。 - SuperNova
3个回答
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);
  }
});

请查看我的CodePen: http://codepen.io/nikhil8krishnan/pen/gaybLK?editors=1010

1
你可以通过设置/删除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;
}

小提琴

（这是保留了html的翻译，实际上没有意义）
0
我所要做的就是将这段代码添加到我的程序中。
CSS
    input:valid + label {
        -webkit-transform:translate(-18px,-24px) scale(0.7,0.7);
        transition:ease-in,0.2s;}

HTML
   required

这样CSS就可以验证它并相应地为表单设置样式。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接