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创建了这样的表单，你可以查看。我希望除了css之外我们可以完全使用jquery。

<table id="test" class="display" cellspacing="0" width="100%">
   <thead>
   <tr>
     <th>First name</th>
     <th>Last name</th>
     <th>Position</th>
     <th>Office</th>
     <th>Start date</th>
     <th>Salary</th>
   </tr>
   </thead>
   <tfoot>
   <tr>
     <th>First name</th>
     <th>Last name</th>
     <th>Position</th>
     <th>Office</th>
     <th>Start date</th>
     <th>Salary</th>
    </tr>
    </tfoot>
    </table>

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

Answer 2

您可以通过设置/删除value元素上的input属性来执行此操作：

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文本输入表单字段设计

3 个答案: