• 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 Dell 27 inch 4K 120Hz IPS monitor is really cheap after a very long time

      By jordanspringer · Posted

      "This Dell 27 inch 4K 120Hz IPS monitor is really cheap after a very long time" ... Lol.
    • This Dell 27 inch 4K 120Hz IPS monitor is really cheap after a very long time

      By hellowalkman · Posted

      This Dell 27 inch 4K 120Hz IPS monitor is really cheap after a very long time by Sayan Sen Recently we covered a really good deal on an AMD RX 9070 three-fan model that's available at slightly above its MSRP. If you are looking for a GPU for 1440p gaming that's around the performance of the Nvidia RTX 5070 you should most definitely check it out. Let's say that you are looking for a monitor to pair that up with too. The Samsung 49" G9 curved QD-OLED superultrawide is a good option that can provide an immersive experience. However despite being a very good deal currently (at $855), it may seem unaffordable to you, or you may simply not want to spend as much on a monitor. In that case Dell's S2725QS can be a very good option as it's on sale at the moment for its lowest price in over six months (purchase link under the specs table down below). The big highlight of the Dell S2725QS is its 27-inch IPS panel with a 3840 x 2160 (4K UHD) resolution, offering a high pixel density that can make text appear sharper while also providing plenty of screen space for productivity and media consumption. The display supports a refresh rate of up to 120Hz through both HDMI and DisplayPort, making it suitable not only for everyday desktop use but also for smoother gaming and scrolling. AMD FreeSync Premium support is included as well, helping reduce screen tearing during gaming sessions. The screen has fairly good brightness and color accuracy so you can use it for general work purpose, though photo/video editing is probably not going to be the best match for this. The technical specs of the Dell S2725QS are given in the table below: Specification Value Viewable Screen Size 27 in (68.58 cm) Screen Mode 4K UHD Maximum Resolution 3840 × 2160 Maximum Preset Resolution 3840 × 2160 @ 120 Hz Standard Refresh Rate 120 Hz Panel Technology In-plane Switching (IPS) Backlight Technology LED Edgelight System Pixel Density 163 PPI Response Time 8 ms GTG, 5 ms GTG, 4 ms GTG Horizontal Viewing Angle 178° Vertical Viewing Angle 178° Brightness 350 cd/m² (nits) Native Contrast Ratio 1500:1 Color Support 1.07 Billion Colors Color Gamut 99% sRGB (CIE 1931) Adaptive Sync AMD FreeSync Premium HDCP Support Yes Mount Type Panel Mount VESA Mount 100 × 100 mm Maximum Height Adjustment 13 cm Tilt -5° to 21° Swivel -30° to 30° Pivot ±90° Stand Adjustments Tilt, Swivel, Height, Pivot Glass Hardness 3H Horizontal Frequency 27–270 kHz (DisplayPort 1.4 / HDMI 2.1) Vertical Frequency 48–120 Hz (DisplayPort 1.4 / HDMI 2.1) Video Inputs 2 × HDMI 2.1 (HDCP 1.4 & 2.3), 1 × DisplayPort 1.4 (HDCP 1.4 & 2.3) Operating Temperature 0°C to 40°C Storage Temperature -20°C to 60°C Operating Humidity 10%–80% (Non-condensing) Storage Humidity 5%–95% (Non-condensing) Get it at the link below: Dell S2725QS 27-inch 4K 120Hz IPS monitor: $218.49 (Sold and Shipped by Amazon US) (Was: $280) 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
    • The official Funny Pictures thread

      By +primortal · Posted

    • Sihoo Doro C300 Pro V2 Ergonomic Office Chair review: The Ikea of chairs

      By MrElectrifyer · Posted

      Looks almost like what our office provides us, excluding the leg rest for obvious reasons 😴
    • Why it's almost impossible to produce a smartphone in the United States

      By Davin Peterson · Posted

      Forget the iPhone. What about Android? Most Samsung Galaxy phones sold in the USA are manufactured in Vietnam. Asian countries have the infrastructure that the USA doesn't have. This is why most electronics are not made in the USA

  • Recent Achievements

    • Conversation Starter
      jessse3334 earned a badge
      Conversation Starter
    • Reacting Well
      JuvenileDelinquent earned a badge
      Reacting Well
    • One Month Later
      Excellence2025 earned a badge
      One Month Later
    • Week One Done
      Excellence2025 earned a badge
      Week One Done
    • Week One Done
      flexorcist earned a badge
      Week One Done

  • Popular Contributors

    1. 1
      +primortal
      498
    2. 2
      +Edouard
      231
    3. 3
      PsYcHoKiLLa
      152
    4. 4
      Steven P.
      82
    5. 5
      macoman
      64
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!