Add text inside an inputbox using CSS

Question

I cannot edit the html code, is the question below possible using only "CSS" code? How do you add a text just like a placeholder or something to an inputbox?

Here's the input text box code:

<input id="isn_email_address" type="text" name="user" size="40" maxlenth="90">

Why you `cannot edit the html code`? Just use a placeholder! — chris97ong, May 29 '14 at 06:52
if only but the code is a built in, It doesn't show the inputbox code. I only inspect elements the code above. — zen, May 29 '14 at 06:54
You would have to add it to the `input` tag. There's no way to add the text with CSS. You can only style the placeholder with CSS but not change the text. — Roope, May 29 '14 at 06:54
` document.getElementById('isn_email_address').placeholder='Enter Email ...'; ` — Rob Sedgwick, May 29 '14 at 06:57
@zen `content` works with `:before` and `:after`. And it only adds the text before or after the element you select. — Roope, May 29 '14 at 06:59
Another Kludge - ` #isn_email_address::before { content: " Enter Email .." } ` and place it absolutely - then hide on ` :hover ` — Rob Sedgwick, May 29 '14 at 07:01
@RakeshShetty , as Zen is asking for ' like placeholder' - Placeholders : http://caniuse.com/input-placeholder / Psuedo : http://caniuse.com/#search=pseudo-elements - — Rob Sedgwick, May 29 '14 at 07:07
@RobSedgwick ***#isn_email_address*** is an input field, and input field is just an empty element, pseudo-element (`:before`, `:after`) can just be used on container elements, and only on some input fields like `checkbox`, `radio`. In this case the input field is just a textbox and normally we can't use `:before` on it. That's what @RakeshShetty meant, looks like **webkit**-based browsers support it somehow **but** all other browsers don't, so it's not a cross-browser solution. — King King, May 29 '14 at 08:27
@KingKing, yeah sure, he would have to target the container - but Zen gets the idea. In fact ::before on the container would have more support than placeholder, anyways, thanks for the egg suck all the same — Rob Sedgwick, May 29 '14 at 18:05

Rakesh Shetty · Accepted Answer · 2014-05-29T07:05:16.730

1

You can't set placeholders using CSS for all browsers. The only browser that supports it at the moment is webkit.

Using jQuery you can achieve this : Working DEMO

Note : you will need latest jquery library you can download from here jQuery Library

Try this code :-

<head>

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

<script type = "text/javascript">

        $(document).ready(function()
        {

            $('#isn_email_address').attr("placeholder", "Type your text here");    

        });

    </script>



</head>

edited May 29 '14 at 07:05

answered May 29 '14 at 06:59

Rakesh Shetty

4,548
7
40
79

Would it still work for webkit even though there is no placeholder attribute in the input tag, would it require the attribute to change it? – Roope May 29 '14 at 07:05
1

@Rakesh Shetty I was referring to your first paragraph, changing it purely with CSS, sorry for being unclear. – Roope May 29 '14 at 07:10
Thank you very much @RakeshShetty your code really works. I did tried searching the net, maybe i wasn't looking hard enough. I'm still a newbie at these things. – zen May 29 '14 at 07:16

score 1 · Answer 2 · answered May 29 '14 at 07:09

1

You could use some pseudo elements, assuming you're not supporting IE7 and below.

#isn_email_address {
   position: relative;
}
#isn_email_address:after { /*could use :before if you wanted too*/
   content: "Type your text here";
   display: block;
}
#isn_email_address:focus #isn_email_address:before {
   display: none;
}

You'll probably need to do some z-index adjustment to make sure that you're able to select the textfield. Additionally, some css *left: /my value here/* to make sure it's in the right spot.

answered May 29 '14 at 07:09

lindsay

972
2
11
21

`:before` and `:after` applies to the content of the element. Since input tags has no content therefore `:before` doesn't work with inputs. – Kheema Pandey May 29 '14 at 07:16
@KheemaPandey good point. Blast. JavaScript solution it is. Thanks for the info too, I wasn't aware of that rule. – lindsay May 29 '14 at 09:42

score 0 · Answer 3 · edited Jun 27 '23 at 20:21

0

If you don't want to use a placeholder, obviously there is another way. I don't know whether it's possible with CSS alone. But using JavaScript and CSS you can definitely do that.

edited Jun 27 '23 at 20:21

Kevin M. Mansour

2,915
6
18
35

answered May 29 '14 at 06:54

Abhinab Kanrar

1,532
2
20
46

1

Thats' not an answer, you should improve your answer – Kheema Pandey May 29 '14 at 06:57
It's pretty easy.So at least let the guy search the internet and do it himself.I've told him how to do it.Please allow him to implement this.I'm all here to help him – Abhinab Kanrar May 29 '14 at 06:59
you no need to suggest OP just goolge it. if you have really answer then comeup with real answer. – Kheema Pandey May 29 '14 at 07:04

Add text inside an inputbox using CSS

3 Answers3