1

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

http://jsfiddle.net/uuHBB/

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.

Marc Audet
  • 46,011
  • 11
  • 63
  • 83
Mike
  • 325
  • 1
  • 8
  • 16
  • 1
    possible duplicate of [CSS content generation before 'input' elements](http://stackoverflow.com/questions/4574912/css-content-generation-before-input-elements) – dsgriffin May 15 '13 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 May 15 '13 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 May 15 '13 at 15:50

3 Answers3

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 ..

Community
  • 1
  • 1
Adrift
  • 58,167
  • 12
  • 92
  • 90
2

: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.

Pavel Strakhov
  • 39,123
  • 5
  • 88
  • 127
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" />
KingRider
  • 2,140
  • 25
  • 23