• 0

[CSS] Place label behind textbox as placeholder?

Asked by Axel,

 Share

Question

Grand Master

Axel

Posted
Posted

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

13 answers to this question

Recommended Posts

  • 0
Community Regular

Freelancer1111

Posted
Posted

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>[/CODE]

  • 0
Neowinian

Jamie Holdroyd

Posted
Posted

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.

  • 0
Community Regular

Calculator

Posted
Posted

You can use the + combinator to select a sibling of the focused input element:


.the-form input:focus + label.placeholder {
	display: none;
}
[/CODE]

This will hide the adjacent placeholder whenever the input gains focus. [font=courier new,courier,monospace][font=arial,helvetica,sans-serif]I forked your fiddle and also set the [font=courier new,courier,monospace]position[/font] on the input to [font=courier new,courier,monospace]relative[/font] so[/font][/font] the different [font=courier new,courier,monospace]z-index[/font] 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.

  • 0
Grand Master

threetonesun

Posted
Posted

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.

  • 0
Grand Master

game_over

Posted
Posted

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.

  • 0
Grand Master

Axel

Posted
  • Author
Posted

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/

  • 0
Community Regular

Freelancer1111

Posted
Posted

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>[/CODE]

This topic is now closed to further replies.
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.

  • Posts

    • TCL's Bang & Olufsen soundbar is 40% off on Amazon

      By Ivan Jenic · Posted

      TCL's Bang & Olufsen soundbar is 40% off on Amazon by Ivan Jenic The TCL Design Series A65K is currently $299.99, down from $499.99. That's 40% off and $200 saved on a soundbar tuned by Bang & Olufsen, which is not a combination you'd normally expect at this price point (purchase link below). Bang & Olufsen doesn't typically show up in the sub-$500 category. The Danish audio brand is known for speakers that cost several times more, so having their acoustic tuning on a $300 soundbar is very appealing. TCL handles the hardware, B&O handles the sound engineering, and the result is what the company calls "accessible luxury." Still, accessible luxury isn’t full-fledged luxury, so don’t expect wonders. But this is a decent soundbar, nevertheless. The A65K is a true 3.1.2 channel system with nine physical drivers, including genuine up-firing height speakers for Dolby Atmos and DTS:X. Many soundbars at this price simulate overhead effects through virtual processing, rather than actual hardware. So, you’re getting the real deal. The design is unusually slim for a system with Atmos compatibility. The bar is just under 2 inches deep and should fit beneath most TV screens. The wireless subwoofer is also compact at roughly 14 x 14 x 5 inches. Total output is 460W, and you can connect to the soundbar via HDMI eARC, Bluetooth 5.3, or USB. There are also eight sound modes through the TCL Home app and an AI calibration capability. Although it’s worth mentioning that AI capabilities in most of these devices are inconsistent, to say the least, and that shouldn’t be the biggest selling point. Still, at $299.99, the A65K is a strong buy for anyone who wants a soundbar that sounds and looks noticeably better than what this price range usually offers. And the Bang & Olufsen branding surely sounds nice - pun intended. TCL Design Series Bang & Olufsen A65K - $299.99 | 40% off on Amazon Good to know This Amazon deal is U.S. specific, and not available in other regions unless specified. We only use first-party seller links (at the time of article publishing); ensure that you purchase from a first-party seller link only. Check out Today's Deals on Amazon | or our recent tech deals. Become a Prime member (for Students or SNAP) via Neowin Get Prime Access - Prime for half price (for qualifying Medicaid, EBT, SNAP) Subscribe to Prime Video, Audible Plus, Music Unlimited or Kindle Unlimited via Neowin As an Amazon Associate, we earn from qualifying purchases.
    • Tidal won't monetize AI slop music, company says

      By Steven P. · Posted

      And he paid Joe Rogan $30M for podcasts. Terrible company.
    • Samsung introduces new AI classroom tools and interactive displays at ISTELive 2026

      By KMilenkoski1202 · Posted

      I sure hope the AI does not give out wrong info during education
    • WhatsApp is getting usernames, and you can reserve your preferred one now

      By wotsit · Posted

      Annoying it’s a gradual roll out
    • Samsung, Amazon extend 990 PRO 2TB NVMe SSD deal beyond Prime Day 2026

      By jahara21 · Posted

      That is $130 more than I paid for my 4TB a year ago. How is this a deal?

  • Recent Achievements

    • Apprentice
      jahara21 went up a rank
      Apprentice
    • Reacting Well
      NovaEdgeX earned a badge
      Reacting Well
    • Week One Done
      NovaEdgeX earned a badge
      Week One Done
    • One Year In
      BA the Curmudgeon earned a badge
      One Year In
    • Conversation Starter
      rosiecharles earned a badge
      Conversation Starter

  • Popular Contributors

    1. 1
      +primortal
      530
    2. 2
      +Edouard
      264
    3. 3
      PsYcHoKiLLa
      149
    4. 4
      Steven P.
      98
    5. 5
      macoman
      60
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!