• 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

    • This Samsung T7 external SSD deal lasts less than a day

      By hellowalkman · Posted

      This Samsung T7 external SSD deal lasts less than a day by Sayan Sen Recently we had covered some nice deals of internal NVMe SSDs which include the 4TB TeamGroup G50 for only $400, the WD_BLACK SN7100 2TB for just $243, as well as the Samsung 990 PRO 1TB for $370. If however you require an external SSD for portability and quick data transfers and have a budget of less than $200 the Samsung T7 1TB model is currently on a limited time deal at just $190, it's lowest price in nearly three months. The deal ends today so you better hurry if you need one (purchase link below). The T7 weighs in at just 72 grams meaning it should be fairly easy to carry around helping in the portability department. Via its USB 3.2 Gen 2 interface the T7 promises sequential read speeds of up to 1050 MB/s and writes of 1000 MB/s. It is also fairly robust with a drop protection of up to 2 meters, though bear in mind that this is not waterproof. For that you will have to choose the rugged T7 Shield. The technical specifications of the Samsung T7 1TB are given in the table below: Specification Value Model Code (1TB) MU-PC1T0T / MU-PC1T0H Interface USB 3.2 Gen 2 (10 Gbps) Dimensions (W × H × D) 85 × 57 × 8 mm Weight 72 g Sequential Read Speed Up to 1,050 MB/s Sequential Write Speed Up to 1,000 MB/s Drop Resistance Up to 2 m (6.6 ft) Encryption AES 256-bit hardware encryption Operating Temperature 0°C to 60°C Non-Operating Temperature -40°C to 85°C Humidity 5% to 95% (non-condensing) Shock Resistance 1,500 G, duration 0.5 ms, 3-axis (non-operating) Vibration Resistance 20–2,000 Hz, 20 G (non-operating) Get it at the link below: Samsung T7 Portable SSD, 1TB External Solid State Drive, MU-PC1T0T/AM, Gray: $189.98 (Sold and Shipped by Amazon US) 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.
    • Microsoft confirms Windows 11 26H2 to finally get one of the most requested features

      By notta · Posted

      I just wish they would put more love into Virtual Desktops. There is just so much more they could do.
    • Creative Sound Blaster AE-X PCIe review: your headphones will love it

      By Steven P. · Posted

      Sounds like you just skimmed over the review, I answer all those questions in it. Although I admit I did not test if DTS works over the headphones, when I get some time I will test this. My personal use case is more speaker-driven (I cover this in the review too).
    • The official Funny Pictures thread

      By Steffan · Posted

    • Creative Sound Blaster AE-X PCIe review: your headphones will love it

      By Steven P. · Posted

      It actually does the same exact thing as yours, 7.1 virtual surround over headphones. From the product page: "Experience sound that surrounds you with 7.1 virtual surround, delivering a wider, more immersive soundstage for movies, games, and music." So both of them are two channel, with 7.1 virtual surround that only work in Headphones mode.

  • Recent Achievements

    • Dedicated
      Almohandis earned a badge
      Dedicated
    • Dedicated
      JuvenileDelinquent earned a badge
      Dedicated
    • First Post
      DrWankel earned a badge
      First Post
    • Reacting Well
      DrWankel earned a badge
      Reacting Well
    • Week One Done
      Supreme Spray LV earned a badge
      Week One Done

  • Popular Contributors

    1. 1
      +primortal
      507
    2. 2
      +Edouard
      185
    3. 3
      PsYcHoKiLLa
      84
    4. 4
      Michael Scrip
      78
    5. 5
      Steven P.
      76
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!