4

Possible Duplicate:
Is there a way to style part of an input field’s value?
Is there any way to change one word color of placeholder?

For example, if we have a form input whose placeholder text is "explore the world, e.g. paris, france", can CSS, jQuery, HTML5, or any other method possible allow us to bold only partial text within the form input to render as: "explore the world, e.g. paris, france".

I am only aware of methods that allow us to bold the entire placeholder text, rendering entirely as "explore the world, e.g. paris, france".

By illustration, here is the goal of this question:

goal

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
Andy Dwyer
  • 696
  • 1
  • 10
  • 30
  • 1
    This is answered in another question: http://stackoverflow.com/questions/3121683/is-there-a-way-to-style-part-of-an-input-fields-value – Nate Dec 28 '12 at 21:22
  • 1
    tl;dr: It's not possible in any straightforward manner, but can be accomplished with more elaborate JS trickery. – Nate Dec 28 '12 at 21:23
  • Not inside of an input, no. You'd have to create a custom html overlay. – Shmiddty Dec 28 '12 at 21:23
  • Not a duplicate of the question about styling input *value*. Might be a duplicate of another question – Jukka K. Korpela Dec 28 '12 at 21:34
  • @Nate Didn't see the other question when I was searching for answers, but I may have been using other keywords. Voted to close as the answers contained in the other question were sufficient for my question as well. Thank you all – Andy Dwyer Dec 28 '12 at 21:36

1 Answers1

5

There is no way to accomplish this with a standard input[type=text] field. You can try to overlay HTML but some browsers handle input fields as controls and will not behave as regular html dom elements.

The approach I would use is something like this:

<html>
<head>
  <style type="text/css">

    div.input { border:1px solid #aaa; width:300px; }

  </style>

</head>
<body>

    <div contenteditable="true" class="input"><strong>explore the world,</strong> e.g. paris, france</div>

</body>
</html>

Hope this helps. Good luck.

Bryan Allo
  • 696
  • 3
  • 9
  • Hmm.. interesting concept here. I have to look more into it, but it appears that it could very well work. Thanks for the answer! – Andy Dwyer Dec 28 '12 at 21:38
  • You're welcome buddy. These days I tend to use DIVs with contenteditable since UI design/function requirements are often more sophisticated than what standard inputs can do. Especially if I'm not submitting an form and using an AJAX call via JQuery, I just use the .text() or .html() method to grab the div/field content. It's a much more flexible approach. You can make inputs more interactive and perform multiple functions. :-) Have fun. – Bryan Allo Dec 28 '12 at 21:42