Set label to full opacity on input field focus

Question

I have a great bit of code that sets the label to 0.5 opacity when the input field is on focus. Now, I'd like to set this to 0 (100% invisibility) if possible.

Can someone help out with this?

Here's my fiddle: http://jsfiddle.net/d8Apy/5/

My HTML:

<div class="fieldgroup">
    <label for="name">Name</label>
    <input type="text" id="name" name="name">
</div><!--/.fieldgroup-->

My CSS:

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-family: Arial;
}
.fieldgroup {
    position: relative;
}
input[type='text'],
label {
    padding: 5px;
    font-size: 16px;
    line-height: 16px;
    margin: 0;
    height: 30px;
    color: #fff;
    display: block;
}
input[type='text'] {
    border: none;
    background: green;
}

I am using this jQuery plugin: http://fuelyourcoding.com/in-field-labels/

Many thanks for any pointers :-)

You already know what to do so what's the problem.It takes a 1 character edit to accomplish this. — Musa, Jul 19 '13 at 16:03
Also, you may want to hit the "TidyUp" button on that jsFiddle, so that is is actually readable... — Schmalzy, Jul 19 '13 at 16:05

score 2 · Answer 1 · answered Jul 19 '13 at 16:00

There is a line of code in the in-field-labels code that says...

$.InFieldLabels.defaultOptions={fadeOpacity:0.5,fadeDuration:300,labelClass:'infield'};

Change this to...

$.InFieldLabels.defaultOptions={fadeOpacity:0.0,fadeDuration:300,labelClass:'infield'};

fadeOpacity:0.5 to fadeOpacity:0.0

score 0 · Answer 2 · edited May 23 '17 at 11:56

0

There is an html property called placeholder that does that. I'm not sure however that you can apply a fade effect to it. edit: It might be possible with css transitions and this: Change an HTML5 input's placeholder color with CSS, but it's rather horrible.

<input type="text" name="fname" placeholder="First name">

input[name:fname]:active { color: green }

edited May 23 '17 at 11:56

Community

1
1

answered Jul 19 '13 at 16:01

sabof

8,062
4
28
52

score 0 · Accepted Answer · answered Jul 19 '13 at 16:04

0

When you apply the plugin to your lables you can set the opacity by passing in an options object like so:

$("label").inFieldLabels({ fadeOpacity:0.0 });

answered Jul 19 '13 at 16:04

Splendiferous

733
2
6
17

Herland Cid · Answer 4 · 2013-07-19T16:14:13.917

0

Javascript

$(document).ready(function() {
$("#name").focus(function(){

$('#lblname').css({'opacity':'0'});

});
   });

EDIT for fade effect

$(document).ready(function() {
$("#name").focus(function(){

$("#lblname").animate({ 'opacity':'0'},350);

});
   });

HTML

<div class="fieldgroup">
<label for="name" id="lblname">Name</label>
<input type="text" id="name" name="name">
</div><!--/.fieldgroup-->

edited Jul 19 '13 at 16:14

answered Jul 19 '13 at 16:06

Herland Cid

574
1
6
23

score 0 · Answer 5 · answered Jul 19 '13 at 16:29

While not implemented by every plugin developer, good practice advocates a plugin accepting an options object. While not terribly clear, you are able to override the fadeOpacity and fadeDuration options.

To solve your issue, simply pass in an options object that specifies the fadeOpacity like so:

$(document).ready(function(){
    $('label').inFieldLabels({fadeOpacity: 0.0});
});

Set label to full opacity on input field focus

5 Answers5