Can css content property be used with input value selector

Question

Is there any way to prepend some text to the value of an input box? This is what I'm trying:

html:

<div class="test">
    test
</div>
<input type="text" value="1" />
<input type="text" value="2" />

CSS:

input[value]:before {content:"Number:";}
input[value] {color: blue;}
.test:before {content:"This is a ";}

I can add text to the div and change the color of the input value but it doesn't seem to like adding text to the input value.

If this can't be done with CSS, I would like a JavaScript/jQuery aided solution.

possible duplicate of CSS content generation before 'input' elements — dsgriffin
– dsgriffin, Commented May 15, 2013 at 15:30
For a "smarter" input field, you will need a JavaScript/jQuery aided solution. Please rephrase your question before it gets closed. The short answer to your question is "no", CSS can't do it by itself as reported in earlier questions. However, you still need a working solution so modifying your question will get you what you need. — Marc Audet
– Marc Audet, Commented May 15, 2013 at 15:44
Yes, looks like javascript is the way forward. At least I wasn't missing something obvious! @MarcAudet bit of a rush at the moment and it's not critical so will look into it later. — Mike
– Mike, Commented May 15, 2013 at 15:50

Community · Accepted Answer · 2017-05-23 10:28:01Z

2

You can't use pseudo-elements on replaced elements as CSS does not define the content for these elements (images, form controls, objects, canvas), so while it may be possible by wrapping the input in another element or just by using the pseduo-elements themselves it won't be cross-browser compatible as its behavior is really dependent upon the UA. You're chartering into unknown territory ..

edited May 23, 2017 at 10:28

CommunityBot

11 silver badge

answered May 15, 2013 at 15:30

Adrift

60.1k12 gold badges98 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pavel Strakhov · Accepted Answer · 2013-05-15 15:39:22Z

:before applies to the content of the element. Since input tags has no content, :before doesn't work with inputs. You should wrap inputs in divs and write css rule for divs.

There is no way to put displayable text inside input. You can add your text to the value of the element, or you can use css to place pseudo element above input box and increase left padding of input box to make room for that element. Or you can just use placeholder attribute.

Also, note that input[value] selector refers to the same elements as input selector, since [value] adds a condition for element's attributes, but doesn't alter what's being selected (input tags in this case). There is no separate 'value' elements in HTML tree, so you can't select it like this.

KingRider · Accepted Answer · 2016-03-14 15:25:22Z

0

Why not try jQuery? but CSS not programming

Let's Try It http://codepen.io/KingRider/pen/vGXvoV

$(document).ready(function() {
  for (x=0;x<$('input[value]').length;x++) {
    $('input[value]:nth('+x+')').val('Number:'+ $('input[value]:nth('+x+')').val())
  }
});

/* input[value]:before {content:"Number:";} */
input[value] {color: blue;}
.test:before {content:"This is a ";}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="test">
    test
</div>
<input type="text" value="1" />
<input type="text" value="2" />

edited Mar 14, 2016 at 15:25

answered Mar 14, 2016 at 14:43

KingRider

2,26728 silver badges24 bronze badges

Collectives™ on Stack Overflow

Can css content property be used with input value selector

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related