• 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

    • Microsoft finally admits its default Windows 11 25H2, 24H2 action broke key legacy component

      By hellowalkman · Posted

      Microsoft finally admits its default Windows 11 25H2, 24H2 action broke key legacy component by Sayan Sen Microsoft last week released Windows 11 KB5094126 and KB5093998 as the latest Patch Tuesday updates. Following that the company also published the accompanying dynamic updates under KB5094149, KB5095971, and KB5094156. So far the company has acknowledged two known issues that have popped up after the release which include bugged-out Office apps as well as the Recycle Bin; though there could be more at play too. Speaking of bugs and issues, Microsoft seems to have finally acknowledged a problem that probably has been around for close to a year. That's because back in July of 2025 the company made a default change to the latest Windows 11 versions, wherein it switched to JScript9Legacy on Windows 11 24H2 and later releases. Hence following the release of version 25H2 in October 2025, JScript9Legacy also remained default-enabled. As a result there has been a compatibility issue ever since then. For those wondering, by switching to JScript9Legacy Microsoft intended to improve the security of modern Windows PCs by reducing vulnerabilities tied to legacy scripting like cross-site scripting (XSS), among others. XSS exploits can allow cyber-attackers to attach malicious code onto legitimate websites and use them to execute the code when a potential victim loads such a website. Hence the new JScript9Legacy engine enforced stricter execution policies and improved object handling, which should help mitigate such attacks. Microsoft today has published a new support article detailing the problem. Neowin spotted it while browsing. The company says that JScript global definitions and execution context may fail to persist across scripts, potentially breaking older dependent apps and web-based components that relied on this legacy behavior. In the article Microsoft has confirmed that the issue stems from its move away from the older jscript9.dll engine in favor of jscript9legacy.dll. As mentioned above, while the newer engine was designed to address vulnerabilities and strengthen security it also changes how JScript handles execution context. As a result functions and definitions loaded by one script could no longer remain available to subsequent scripts once execution ended. The company notes that some applications worked correctly on earlier Windows versions because the older JScript engine automatically retained global definitions and execution state between scripts. Under the newer model though that behavior is disabled by default causing certain legacy workloads and polyfill-dependent scripts to fail. Microsoft says it addressed the problem via the KB5077241 update though the fix had not been enabled automatically in the following updates. As such admins must explicitly turn on persistent JScript execution context using a Registry setting that the tech giant shared today. The configuration can be applied to individual processes or system-wide through the FEATURE_ENABLE_PERSISTENCE registry key. The steps have been outlined below: Run the following command to create the feature control registry key: reg add "HKLM\Software\Policies\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_ENABLE_PERSISTENCE" Under this key, create a new DWORD (32-bit) value. Configure the value as follows: To enable persistence for specific processes only: Set the value to 1 for each target process name. To enable persistence for all processes: Add * as the key name and set its value to 1. You can find the official support article here on Microsoft's website.
    • The quantum search for Time's origin had an equally mind-boggling conclusion

      By cleverclogs · Posted

      The possibility that milk gathers back into a glass implies that gravity can be 'reversed'.
    • VidCoder 12.20

      By Copernic · Posted

      VidCoder 12.20 by Razvan Serea  VidCoder is a DVD/Blu-ray ripping and video transcoding application for Windows. It uses HandBrake as its encoding engine. Calling directly into the HandBrake library gives it a more rich UI than the official HandBrake Windows GUI. VidCoder can rip DVDs but does not defeat the CSS encryption found in most commercial DVDs. You’ll need the NET 8 Desktop Runtime. If you don’t have it, VidCoder will prompt you to download and install it. The Portable version is self-contained and does not require any .NET Runtime to be installed. You do not need to install HandBrake for VidCoder to work. Feature list: Multi-threaded MP4, MKV containers Completely integrated encoding pipeline: everything is in one process and no huge intermediate temporary files H.264, H.265, MPEG-4, MPEG-2, VP8, Theora video Hardware-accelerated encoding with AMD VCE, Nvidia NVENC and Intel QuickSync AAC, MP3, Vorbis, AC3, FLAC audio encoding and AAC/AC3/MP3/DTS/DTS-HD passthrough Target bitrate, size or quality for video 2-pass encoding Decomb, detelecine, deinterlace, rotate, reflect, chroma smooth, colorspace filters Powerful batch encoding with simultaneous encodes Customizable Pickers to automatically pick audio and subtitle tracks, destination, titles and more Instant source previews Creates small encoded preview clips Pause, resume encoding VidCoder 12.20 changes: Updated HandBrake core to 1.11.2. Download: VidCoder 12.20 | 47.0 MB (Open Source) Download: Portable VidCoder 12.19 | 89.3 MB Link: VidCoder Home Page | Github | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • This is how much iPhone 18 Pro could cost after Apple's price hike confirmed

      By +Nik Louch · Posted

      They will
    • Politically funny images of the World

      By +Nik Louch · Posted

      Too soon, I'm still not over this death!

  • Recent Achievements

    • Week One Done
      Jordan Smith earned a badge
      Week One Done
    • Reacting Well
      BizSAR earned a badge
      Reacting Well
    • First Post
      AndreaB earned a badge
      First Post
    • Week One Done
      Huge Trailer earned a badge
      Week One Done
    • Week One Done
      Classifyskilleducation earned a badge
      Week One Done

  • Popular Contributors

    1. 1
      +primortal
      593
    2. 2
      +Edouard
      185
    3. 3
      PsYcHoKiLLa
      77
    4. 4
      Michael Scrip
      73
    5. 5
      Steven P.
      66
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!