• 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

    • Apple CEO Tim Cook confirms looming price hikes due to memory shortages

      By Ashpian · Posted

      I bet the flip phone is $3k or more…
    • Politically funny images of the World

      By +primortal · Posted

    • Samsung Galaxy Watch8 is now selling at its lowest price ever

      By Fiza Ali · Posted

      Samsung Galaxy Watch8 is now selling at its lowest price ever by Fiza Ali Amazon is now offering Samsung Galaxy Watch8 at its lowest price yet with a 34% discount (purchase link down below). The Galaxy Watch8 is equipped with a 1.5-inch Super AMOLED display with a resolution of 480x480 pixels and support for 16 million colours. The watch is powered by a penta-core processor with clock speeds of up to 1.6GHz, runs Wear OS, and includes 2GB of RAM and 32GB of internal storage. For connectivity, the watch supports Bluetooth 5.3, Wi-Fi 802.11a/b/g/n on both 2.4GHz and 5GHz bands, and NFC. Furthermore, supported Bluetooth profiles include A2DP, AVRCP, HFP, and HSP. Location services are provided through GPS, GLONASS, BeiDou, and Galileo satellite systems. Moreover, the Galaxy Watch8 includes a range of sensors as well, including an accelerometer, barometer, bioelectrical impedance analysis (BIA) sensor, electrical heart sensor (ECG), optical heart rate sensor, gyroscope, geomagnetic sensor, infrared temperature sensor, and ambient light sensor. For media playback, the watch supports MP3, M4A, 3GA, AAC, OGG, OGA, WAV, AMR, and AWB audio formats. In terms of water resistance, it has a 5 ATM rating, which should make it suitable for swimming and everyday exposure to water. Finally, the device is powered by a 435mAh lithium-ion battery, and when it comes to its performance, Samsung rates the battery for up to 40 hours of use with the Always-On Display turned off. Samsung Galaxy Watch 8 (2025) 44mm Smartwatch: $249.99 (Amazon US) - 34% off 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.
    • Politically funny images of the World

      By +primortal · Posted

    • Most AI-powered mainframe migration vendors expected to fail by 2030, Gartner warns

      By vZeroG · Posted

      Remarkably based article from Garter - apparently there IS someone working there that actually understands mainframe systems.

  • Recent Achievements

    • Week One Done
      Huge Trailer earned a badge
      Week One Done
    • Week One Done
      Classifyskilleducation earned a badge
      Week One Done
    • One Month Later
      eurospharma62 earned a badge
      One Month Later
    • Week One Done
      With What earned a badge
      Week One Done
    • Week One Done
      Harris Gilbert earned a badge
      Week One Done

  • Popular Contributors

    1. 1
      +primortal
      592
    2. 2
      +Edouard
      170
    3. 3
      PsYcHoKiLLa
      74
    4. 4
      ATLien_0
      64
    5. 5
      Michael Scrip
      64
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!