• 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 confirms Recycle Bin bug across all versions of Windows

      By Usama Jawad96 · Posted

      Microsoft confirms Recycle Bin bug across all versions of Windows by Usama Jawad A couple of days ago, we reported that the latest Patch Tuesday update has seemingly resulted in a lot of issues for many users, including OneDrive and Dropbox access problems, BitLocker recovery lockouts, and BSODs. Although Microsoft is yet to acknowledge these bugs, it has confirmed another, relatively smaller issue across all supported versions of Windows. In an update on its Windows Release Health Dashboard, Microsoft has confirmed that after installing June's Patch Tuesday update (KB5094126), you'll experience unexpected behavior when leveraging Recycle Bin. Basically, when you attempt to delete an item from the Recycle Bin, the confirm dialog will show you the internal file name of that content rather than the actual name. For example, the file may be named abc.png, but the confirm dialog will ask if you're sure that you want to permanently delete $Rxxxxx.png from the Recycle Bin. This is pretty much it for the scope of the bug itself; it just displays the wrong name in the confirm dialog. The correct name will be shown in the list view of the Recycle Bin and if you restore the file, it will return with the correct name as well. This issue affects pretty much all supported versions of Windows client and server, including: Client: Windows 11, version 26H1; Windows 11, version 25H2; Windows 11, version 24H2; Windows 11, version 23H2; Windows 10, version 22H2; Windows 10 Enterprise LTSC 2021; Windows 10 Enterprise LTSC 2019; Windows 10 Enterprise LTSB 2016 Server: Windows Server 2025; Windows Server 2022; Windows Server 2019; Windows Server 2016; Windows Server 2012 R2; Windows Server 2012 As things currently stand, Microsoft is working on a concrete solution that will be released in a "future" Windows update. It remains to be seen if the firm will wait till the next Patch Tuesday or roll out an out-of-band (OOB) fix. The good news is that commercial customers can deploy a workaround right now, but they will have to reach out to Microsoft Support for Business for additional details.
    • We now know when and how the Universe may truly end

      By Mindovermaster · Posted

      They said by this time everyone will have flying cars. WELL...
    • We now know when and how the Universe may truly end

      By +TRS-80 · Posted

      A study by physicist Henry Tye of Cornell University suggests that the universe may not expand forever. Instead, it could eventually stop expanding, begin contracting and end in a "Big Crunch" roughly 20 billion years from now. Maybe not as we now know that time can flow backwards.
    • We now know when and how the Universe may truly end

      By Pishaw · Posted

      Of course. Simply reverse the polarity.
    • The quantum search for Time's origin had an equally mind-boggling conclusion

      By +TRS-80 · Posted

      It is clear from this aricle that "Time Is On My Side" no matter which direction it is flowing., https://noai.duckduckgo.com/?i...m%2Fwatch%3Fv%3DsEj8lUx0gwY

  • Recent Achievements

    • 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
    • One Month Later
      eurospharma62 earned a badge
      One Month Later

  • Popular Contributors

    1. 1
      +primortal
      577
    2. 2
      +Edouard
      183
    3. 3
      PsYcHoKiLLa
      75
    4. 4
      Michael Scrip
      72
    5. 5
      neufuse
      64
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!