0

I would like to style the placeholder text of a single input field with multiple styles.

I want to style differently the text that is between the span tags in the label (the optional text). The CSS is not working.

$(".label").each(function() {
  el = $(this);
  label_value = el.text();
  el.hide();
  el.next('input').val(label_value).addClass("hide");
});

$("input").focus(function() {
  el = $(this);
  input_value = el.val();
  label_value = el.prev('.label').text();
  if (input_value == label_value) {
    el.val('').removeClass("hide");
  }
})
$("input").blur(function() {
  el = $(this);
  if (el.val() == '') {
    label_value = el.prev('.label').text();
    el.val(label_value).addClass("hide");
  }
});
input.hide span {
  color: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<label class="label">Brand <span>(optional)</span></label>
<input type="text" autocomplete="off" id="brand" name="brand" value="" />

Any suggestions?

tacoshy
  • 10,642
  • 5
  • 17
  • 34
Sofia Lazrak
  • 264
  • 5
  • 18
  • 1
    `label.hide span{ color: red }` – Konrad Feb 20 '23 at 11:06
  • Sorry about that. I edited the title. I did not realize my caps lock was on – Sofia Lazrak Feb 20 '23 at 11:06
  • 1
    Your question does not seem to match the title. In HTML an input placeholder is a specific attribute with specific properties, but in your question you are only mentioning elements within the label. – soupy-norman Feb 20 '23 at 11:07
  • 1
    @soupy-norman OP is using a label as a placeholder, yes it's wrong, but it's a common practice – Konrad Feb 20 '23 at 11:10
  • 1
    The selector `input.hide span` makes little sense - and input element can not _have_ any children. – CBroe Feb 20 '23 at 11:10
  • Plus you got the label element's content using `label_value = el.text();` - so the span is not contained in that value any more to begin with here. – CBroe Feb 20 '23 at 11:10
  • Instead of setting the value of the input field (which you can't format in multiple different ways to begin with - you have _one_ element to format here, the input field), show the label _behind_ the input field, and give the input a transparent background - then you can apply whatever arbitrary formatting you want to the label contents. (Would still rather be an _abuse_ of a label for that though.) – CBroe Feb 20 '23 at 11:11

1 Answers1

-1

el.text() only return texts of DOM Node. See https://api.jquery.com/text/#text

Unlike the .html() method, .text() can be used in both XML and HTML documents. The result of the .text() method is a string containing the combined text of all matched elements. (Due to variations in the HTML parsers in different browsers, the text returned may vary in newlines and other white space.) Consider the following HTML:

<div class="demo-container">
  <div class="demo-box">Demonstration Box</div>
  <ul>
    <li>list item 1</li>
    <li>list <strong>item</strong> 2</li>
  </ul>
</div>

So, label_value is Brand (optional) label_value, span tag is ignored. And, you can't set different color to part of input field. Input has no child at any time. See Is there a way to style part of an input field's value?

BTW:Capital title is annoying.

YinPeng.Wei
  • 552
  • 3
  • 9