• 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

    • Politically funny images of the World

      By PsYcHoKiLLa · Posted

    • Apple MacBook Neo is a blessing for Windows users, here's why

      By +samw61 · Posted

      But the reality is it will work for people's needs, and they don't care about the technology that makes it. Clearly not everyone's needs, but that low end space where personal laptops were only used to type emails, watch content and browse websites, but they didn't want to do that on a small screen device. Heck, writing that out I can now see the connection and reason it'll do so well. Apple is about experience. If the experience is bad, they don't release it. Low end Windows laptop manufacturers up until this point have not taken that into consideration ever before, so slow laggy usage with brittle slimey plastic shells were common. I hope that the low end space at least creates better physical products that last a bit longer, and if Microsoft get their act together, they could also have a solid OS on such low end hardware that would actually make the experience work for what the hardware was intended for. The fact that the CPU is a "cellphone", sorry mobile phone processor is irrelevant. It's about the experience, and so far, that sounds quite solid.
    • Module Blocked - Is this Okay?

      By goretsky · Posted

      Hello, Bonjour is Apple's implementation of a multicast-DNS service, which allows devices running Apple's software and/or hardware to find each other on your local network.  I believe the Windows version was last updated around 2010. If you do not need it, you can stop and disable the Bonjour service in the Services Control Manager (filename: SERVICES.MSC).  Once you have done that, the operating system will no longer attempt to load the service. Regards, Aryeh Goretsky  
    • This AMD RX 9070 16GB GPU that performs close to Nvidia 5070 is under $600

      By hellowalkman · Posted

      This AMD RX 9070 16GB GPU that performs close to Nvidia 5070 is under $600 by Sayan Sen With the memory shortage that's prevalent nowadays, discounts are super-hard to get. As such we post good deals whenever they pop up. Recently, we covered a few great discounts on SSDs wherein you can get a 4TB TeamGroup NVMe PCIe Gen4 drive for just $400 thanks to a special coupon. If you want a faster product but don't need all that capacity, you can also opt for Samsung's 990 PRO 2TB that is on sale for its lowest price in over three months. Let's say though that you are on the hunt for a 1440p gaming card. In that case AMD's RX 9070 non-XT can help, and with its 16GB VRAM, you can also run AI models locally without worrying about bottlenecking (check out our recent 9070 GRE reviews for gaming and productivity to get an idea). The PowerColor Reaper variant of the RX 9070 is currently on sale for just $580 which is a very good price in the current state of affairs (purchase link under the specs table down below). The Reaper cooler on this 9070 uses a triple‑fan design with ring‑blade fans, paired with premium dual ball bearings to extend lifespan and reduce friction. "Intelligent" fan control allows the fans to remain idle at lower temperatures, only spinning up when the GPU is under load. A nickel‑plated copper base makes direct contact with both the GPU and memory modules, helping to spread heat evenly. PowerColor also applies Honeywell PTM7950 phase‑change thermal interface material (TIM), which fills microscopic gaps between the die and heatsink for more efficient thermal transfer. The fan shroud is shorter in height as the firm has made it such that it can be used in certain SFF (small form factor) cases. The technical specifications of the Reaper RX 9070 are given in the table below: Specification Value Stream Processors 3584 Units Video Memory 16GB GDDR6 Memory Speed 20.0 Gbps Memory Interface 256-bit Engine Clock Game Clock: up to 2070 MHz Boost Clock: up to 2520 MHz Bus Standard PCI Express 5.0 x16 Display Connectors 1 x HDMI 2.1b, 3 x DisplayPort 2.1a Maximum Resolution DisplayPort: 7680 × 4320 HDMI: 7680 × 4320 Board Dimensions 289mm × 111mm × 41mm 304mm × 127mm × 42mm (with bracket) Slot 2 Minimum System Power Requirement 600W Power Connectors Two 8-pin PCI Express Get the PowerColor Reaper RX 9070 at the links below (you get only a 90-day warranty on Woot): PowerColor Reaper Radeon RX 9070 16GB Graphics Card (RX9070 16G-A): $579.99 (Sold and Shipped by Amazon US) (Was: $700) PowerColor Reaper Radeon RX 9070 16GB Graphics Card (RX9070 16G-A): $559.99 (Sold and Shipped by Woot 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.
    • DWARF mini review: the world's smallest smart telescope for night and day sky captures

      By ZipZapRap · Posted

      Are they marketed as an entry into astronomy or astrophotography? I do astrophotography. With big rigs, lots of computers, cables and headaches. I love it. And by learning this ridiculously complex hobby, I’ve learned about the objects I’m shooting. Astronomy followed from photography.

  • 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
      582
    2. 2
      +Edouard
      185
    3. 3
      PsYcHoKiLLa
      75
    4. 4
      Michael Scrip
      73
    5. 5
      neufuse
      64
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!