CODEWITHSUNDEEP
asp.net
Agnes
Agnes

Reputation: 67

Make a part of List item a different color and not the entire list item?

I have a listbox item like "I understand and agree .....". In order to notify users, I have a requirement to add a text in front of that item before "I understand" with a text called "New:" with Green colour so that users understand that it is a new statement in the listbox. What I did makes entire list item green, Can I just make a single text colour green in the list item and not the entire list item?

  <asp:ListItem Value="4" onclick="CheckAllConditions();" style="color:green"> New:  I understand and agree the statement!  </asp:ListItem>

I just need the text "New:" as Green colour. How to do this?Please help.

Upvotes: 1

Views: 273

Answers (2)

Nisarg Shah
Nisarg Shah

Reputation: 14561

I think Joel Coehoorn's answer is incorrect. You cannot put a <span> element inside a ListItem for a ListBox control.

The listbox control in ASP.Net is rendered as a <select> element in the browser, where every ListItem is converted into an <option> element. It is possible to an entire <option> element, but you can't style parts of it separately.

According to MDN, the option element only allows plain text inside it (i.e. other elements such as <span> are not allowed).

Permitted content: Text, possibly with escaped characters (like &eacute;).

Here's an example where I have put in the markup to style the text inside an <option> element. You'll notice that the entire second option is green, while no part of the third item is green. 

<select multiple>
  <option>Some text</option>
  <option style="color: green;">Green text</option>
  <option><span style="color: green">Green text</span> - Normal Text</option>
</select>

You can however use a pseudo element to insert the content "New" before an option and give it green color.

In the snippet below I have applied CSS Class new-item to one of the options, and added the content "New" with green color to the ::before pseudo element using it.

.new-item::before {
  content: "New: ";
  color: green;
}
<select multiple>
  <option>Some text</option>
  <option style="color: green;">Green text</option>
  <option class="new-item">
    I understant...
  </option>
</select>

The markup in ASP.Net should be:

<asp:ListItem Value="4" onclick="CheckAllConditions();" CssClass="new-item"> 
    I understand and agree the statement!  
</asp:ListItem>

Upvotes: 1

Joel Coehoorn
Joel Coehoorn

Reputation: 416073

<asp:ListItem Value="4" onclick="CheckAllConditions();"> 
    <span style="color:green;">New:</span>  
    I understand and agree the statement!  
</asp:ListItem>

Upvotes: 0

Related Questions