CODEWITHSUNDEEP
htmlcssformsinputtextinput
Snehil Gupta
Snehil Gupta

Reputation: 67

CSS text input form field design

Once the focus is away the label transforms back, i just want that once the text is entered the transformation stays despite focus and if no text is entered it becomes the same as earlier, please help me add a piece of code in it so that it happens

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

Upvotes: 3

Views: 566

Answers (3)

Snehil Gupta
Snehil Gupta

Reputation: 67

All I had to do is add this to my code

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

HTML
   required

so that the css could validate it and style form accordingly.

Upvotes: 0

epoch
epoch

Reputation: 16595

You can do this by setting/removing the value attribute on the input element:

JS (PS: this is using 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

Upvotes: 1

Krish
Krish

Reputation: 1894

I have created a kinda forms like this with jquery, you can check with that. I hope we can perfectly done with jquery other than 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);
  }
});

Check my codepen: http://codepen.io/nikhil8krishnan/pen/gaybLK?editors=1010

Upvotes: 1

Related Questions