• 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

    • Researchers claim Microsoft's quantum breakthrough is flawed by basic Python errors

      By Fleet Command · Posted

      🙄
    • Limited time Prime Day deal cuts price of this Hisense 65" 4K smart TV in half

      By Ivan Jenic · Posted

      Limited time Prime Day deal cuts price of this Hisense 65" 4K smart TV in half by Ivan Jenic It’s Amazon Prime Day, and brands are offering great deals to consumers. One of the best deals of the day is definitely this Hisense 65" U7, which is currently $799.99 on Amazon, down from $1,499.99. That's nearly 50% off and $700 saved on this feature-packed 4K TV (purchase link down below). The U7 uses Mini-LED backlighting with up to 3,000 local dimming zones and up to 3,000 nits of peak brightness. That means blacks are truly deep and highlights are punchy enough to hold up even in bright rooms. The screen is covered with a dual-layer anti-reflection coating, which prevents the afternoon overhead lights from washing the picture. For gaming, the native 165Hz refresh rate and VRR 330 support make this one a great TV option for PS5 and Xbox Series X. The TV even features a native game mode, which should help minimize the input lag for a better gaming experience. Audio is handled by a 2.1.2 channel system tuned by Devialet, which is a notable partnership for a TV at this price. Additionally, Dolby Vision IQ, Dolby Atmos, and IMAX Enhanced are all supported. It runs Fire TV with Alexa+ built in. So, if you’re looking for a sharp, large screen to watch the World Cup on, the U7 at this price is definitely an attractive option. Speaking of which, Hisense is the official sponsor of the World Cup, which should mean absolutely nothing to you, and isn’t the reason why you should by this TV. The reason why you should buy it is that it’s “la bella televisione, HDTV-compatible, beautiful,” and available at half the price. Hisense 65" U7 Mini-LED 4K Smart Fire TV - $799.99 | 47% 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.
    • eM Client 10.4.5600.0

      By Copernic · Posted

      eM Client 10.4.5600.0 by Razvan Serea eM Client is a full featured e-mail client with a modern and easy to use interface. eM Client also offers calendar, tasks, contacts and chat. eM Client supports all major services including Gmail, Exchange, iCloud, and Outlook.com. You can easily import your data from most of the other e-mail clients. This includes Microsoft Outlook, Outlook Express, Windows Mail, Windows Live Mail, Thunderbird, The Bat and more. eM Client fully supports touch devices like touch-enabled laptops, tablets and hybrid devices. Use your email client easily in a modern way. eM Client PRO vs. Free version While the Free license allows you to set up the maximum of two accounts in the application, it is possible to add an unlimited number of accounts with the PRO license. The PRO license also enables you to use eM Client for commercial purposes. Commercial use is any activity that helps you make profit, the Free license therefore cannot be used in company settings or on personal computers for business correspondence. PRO users also gain access to the dedicated support system and to the licensing manager. eM Client has been fully optimized to run smoothly on Windows Vista, 7, 8, 10 and 11. eM Client 10.4.5600.0 changelog: Improved memory management Improved MS Teams support A lot of other fixes Download: eM Client 10.4.5600 | 128.0 MB (Free, paid upgrade available) View: eM Client Website | eM Client Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • EU says AWS and Microsoft Azure should be treated as DMA gatekeepers

      By Nas · Posted

      Re: Capitalism. It's just 1 of dozens of economic models currently-adopted worldwide; most national models separate money from politics thereby limiting the influence wealth carries over the economy (due to limited tentacles wealth politics has over the broader economy). The "American model" of unfettered financial influence should NOT be the variant of pure capitalism adopted worldwide. More regulations formulated within this variant is effectively useless due to the misalignment between regulatory objectives and fundamental influence wealth politics carry over the market. Re: enough money. Without constraining the breadth/depth/scope/scale that any measure of money/wealth can have within a market, there will always inherently be those who have "enough money" and those who do not. Those without "enough money" will always lose -- regardless if a bedroom DJ, indie developer, or million-dollar corporation going against a billion-dollar mega-corporation. The evil is the absence of guardrails against the influence of wealth; not the mere existence of wealth. Re: dragged through the courts. The liberalist nature of litigation does not exclude anyone, anywhere, for any reason for getting dragged through the courts. Rather than formalize remediation pathways for various perceived ills, everything is left up to flawed interpretations... and this is where a litigation-averse community fails to thrive (thus a losing proposition when dragged to courts). Everyone should have more protections and clear remediation strategies! Going to an alternate remediation arbitration is OK so long as the case review and remediation processes are clear and transparent. For corporations, hit them where it hurts: automatic financial penalties. (PS: This is where corporate risk management strategies would do well to behave more ethically.) Overall, failure to truly shake-up the incentive core and regulatory extremities of the economic market will necessarily mean that all other actions are simply applying lipstick on a pig. Change begins from the inside. Is the root cause of the problem that a majority of consumers within a market goes for Option Brand-name versus Option Indie? Or that brand-name is spending foreign money to control domestic markets? Or that money is the objective measure for success across all walks of life? Or that deep pockets dictate the moral and ethical rights/wrongs of entire societies? Regardless of the answer (and there's nothing inherently wrong with being a socialist or communist or whatever label your surroundings deem 'cool' or 'uncool') there's a common thread: If a market truly wants to nurture domestic innovation, then performative finger-wagging will do nothing to that end.
    • Researchers claim Microsoft's quantum breakthrough is flawed by basic Python errors

      By +pmrd · Posted

      Lol, I won't even bother explaining the joke to you.

  • Recent Achievements

    • Conversation Starter
      Admir earned a badge
      Conversation Starter
    • First Post
      The_Focal_Point earned a badge
      First Post
    • Apprentice
      daryld went up a rank
      Apprentice
    • Contributor
      Carltonbar went up a rank
      Contributor
    • One Month Later
      The_Focal_Point earned a badge
      One Month Later

  • Popular Contributors

    1. 1
      +primortal
      407
    2. 2
      +Edouard
      167
    3. 3
      PsYcHoKiLLa
      130
    4. 4
      Xenon
      71
    5. 5
      neufuse
      69
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!