CSS文本輸入表格字段設計

一旦焦點消失，標籤將變回，我只是希望一旦輸入文本，轉換就會保持焦點，如果沒有輸入文本，它將變得與之前相同，請幫助我添加一塊在它的代碼，以便它發生CSS文本輸入表格字段設計

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

來源

2016-01-27 Snehil Gupta

使用jquery。定義類來添加變換（儘管重點仍然保留）。編寫一個函數，在聚焦時添加一個類，並且有文本。 – AceLearn

我們可以用CSS來做到嗎？ –

css文件不支持條件語句。你也可以研究sass（「Sass讓CSS變得有趣了，Sass是CSS，加上嵌套的規則，變量，mixins等等，都是簡潔易懂的語法。」）但我不確定sass也是.. – AceLearn

我不得不這樣做的是加入到我的代碼

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

HTML 
    required

，這樣的CSS可以相應地對其進行驗證和風格形式。

來源

2016-01-27 08:33:46

我創建了一個還挺形成像這樣使用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

來源

2016-01-27 06:22:16 Krish

您可以通過設置/在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

來源

2016-01-27 07:46:17 epoch

CSS文本輸入表格字段設計

回答

相關問題