Welcome Guest! To access all forums & features, please register an account or sign-in. → Why register?


C Spire expanding LTE coverage to Alabama and Florida in Back Page News

[CSS] Place label behind textbox as placeholder?

Started by Axel, Feb 11 2013 13:29

13 replies to this topic - - - - -

#1 Axel

    --[Est. 1986]--

  • 5,305 posts
    • Joined: 05-August 03
  • Location: Milton Keynes, UK

Posted 11 February 2013 - 13:29

http://jsfiddle.net/QSh64/

The code is above.

I have made it so that onclick the background of the textbox will change from transparent to white. However I can't seem to figure out how to place the label behind the checkbox so it gets hidden. I've tried changing the z-index and nothing happens.

I'm trying to make a placeholder that disappears on click. By default chrome doesnt seem to remove the placeholder until the user starts typing.

Any clues?

Cheers,

Alex

Ad Bot


#2 Freelancer1111

    Neowinian²

  • 205 posts
    • Joined: 11-December 10
  • Location: Germany

Posted 11 February 2013 - 13:36

Can't you solve it with Javascript ?

Something like this :

<head>
    <script type="text/javascript">
	    function ClearPlaceHolder (input) {
		    if (input.value == input.defaultValue) {
			    input.value = "";
		    }
	    }
	    function SetPlaceHolder (input) {
		    if (input.value == "") {
			    input.value = input.defaultValue;
		    }
	    }
    </script>
</head>
<body>
    <input type="text" value="Please fill this field" onfocus="ClearPlaceHolder (this)" onblur="SetPlaceHolder (this)" />
</body>

#3 OP Axel

    --[Est. 1986]--

  • 5,305 posts
    • Joined: 05-August 03
  • Location: Milton Keynes, UK

Posted 11 February 2013 - 13:42

i'd rather do it pure css if possible. It's part of a big complicated wordpress site so the less i have to put in the head the better. I don't see why this can't be achieved with the method I'm attempting.

#4 Jamie Holdroyd

    Neowinian

  • 7 posts
    • Joined: 18-August 12

Posted 11 February 2013 - 13:53

View PostAxel, on 11 February 2013 - 13:42, said:

i'd rather do it pure css if possible. It's part of a big complicated wordpress site so the less i have to put in the head the better. I don't see why this can't be achieved with the method I'm attempting.

You missed position: relative from the input, so right now the z-index is useless and the label is ontop of the input so when the background colour is changed it doesn't hide it.

#5 Calculator

    Neowinian³

  • 303 posts
    • Joined: 13-May 05
  • Location: Belgium

Posted 11 February 2013 - 13:58

You can use the + combinator to select a sibling of the focused input element:
.the-form input:focus + label.placeholder {
	display: none;
}
This will hide the adjacent placeholder whenever the input gains focus. I forked your fiddle and also set the position on the input to relative so the different z-index actually takes effect, as suggested by Jamie.

Note however that when the user types in the input and the input loses focus again, the placeholder re-appears. There's no CSS pseudo-class for distinguishing (non-)empty inputs, so you'll need a bit of JavaScript either way to hide the placeholder when the input is filled in.

#6 spacer

    I'm awesome

  • 5,389 posts
    • Joined: 09-November 06
  • Location: Connecticut, USA
  • OS: Windows 7
  • Phone: Nexus 4

Posted 11 February 2013 - 14:08

http://jsfiddle.net/UHKJt/

#7 threetonesun

    Neowinian ULTRAKILL

  • 11,301 posts
    • Joined: 26-February 02

Posted 11 February 2013 - 14:32

View PostAxel, on 11 February 2013 - 13:42, said:

i'd rather do it pure css if possible. It's part of a big complicated wordpress site so the less i have to put in the head the better. I don't see why this can't be achieved with the method I'm attempting.

You're using other javascript scripts on the page, right? Compile them into one file and minimize it, it's a much better solution than non-semantic label hiding in css.

#8 Uplift

    Deejayy...

  • 5,173 posts
    • Joined: 07-May 04
  • Location: England

Posted 11 February 2013 - 15:00

View PostAxel, on 11 February 2013 - 13:29, said:

By default chrome doesnt seem to remove the placeholder until the user starts typing.
Thats because it's a much better implementation of placeholders, lets say the user is looking at keyboard, they press tab, place holder is hidden.. it's best for placeholder to be removed when the user starts typing..

unless your doing it for something specific i'm struggling to see why you would go to the effort to do this when it provides a worse user experience.

#9 OP Axel

    --[Est. 1986]--

  • 5,305 posts
    • Joined: 05-August 03
  • Location: Milton Keynes, UK

Posted 11 February 2013 - 15:37

Only because the person I'm doing the coding for wants it done unfortunately. I'll take a look at these methods and report back - thanks!

#10 Uplift

    Deejayy...

  • 5,173 posts
    • Joined: 07-May 04
  • Location: England

Posted 11 February 2013 - 16:02

View PostAxel, on 11 February 2013 - 15:37, said:

Only because the person I'm doing the coding for wants it done unfortunately. I'll take a look at these methods and report back - thanks!

ok fair enough, maybe try to educate them why it's a bad ux decision :)

#11 OP Axel

    --[Est. 1986]--

  • 5,305 posts
    • Joined: 05-August 03
  • Location: Milton Keynes, UK

Posted 11 February 2013 - 17:07

I just thought of a REALLY simple solution!:-

<input id="code-field" type="text" placeholder="Postal Code" onfocus="placeholder=''" onblur="placeholder='Postal Code'">

onfocus and onblur events to change the placeholder text :)

http://jsfiddle.net/UQdFR/

#12 Uplift

    Deejayy...

  • 5,173 posts
    • Joined: 07-May 04
  • Location: England

Posted 11 February 2013 - 17:50 

input:focus::-webkit-input-placeholder 
{
    color: transparent;
}

#13 Freelancer1111

    Neowinian²

  • 205 posts
    • Joined: 11-December 10
  • Location: Germany

Posted 11 February 2013 - 18:46

Well that is another workaround, but you have to remember that many older Web Browsers (also modern Internet Explorer) don't support the "placeholder" attribute !

http://www.w3schools...placeholder.asp

You could also do this in a sort-of hybrid thing. Use Placeholder when support and Javascript when necessary.

<script>
    // placeholder polyfill
    $(document).ready(function(){
	    function add() {
		    if($(this).val() == ''){
			    $(this).val($(this).attr('placeholder')).addClass('placeholder');
		    }
	    }

	    function remove() {
		    if($(this).val() == $(this).attr('placeholder')){
			    $(this).val('').removeClass('placeholder');
		    }
	    }

	    // Create a dummy element for feature detection
	    if (!('placeholder' in $('<input>')[0])) {

		    // Select the elements that have a placeholder attribute
		    $('input[placeholder], textarea[placeholder]').blur(add).focus(remove).each(add);

	    // Remove the placeholder text before the form is submitted
		    $('form').submit(function(){
			    $(this).find('input[placeholder], textarea[placeholder]').each(remove);
		    });
	    }
    });
</script>

#14 primexx

    Neowinian ULTRAKILL

  • 12,023 posts
    • Joined: 24-April 05

Posted 11 February 2013 - 23:24

don't reinvent the wheel.
Back to Web Design / Programming · Next Unread Topic →


  1. Quick Nav
  2. Neowin Forums
  3. → Technical Help & Support
  4. → Web Design / Programming