将List项的一部分设为不同的颜色,而不是整个列表项?

时间:2018-04-05 16:45:56

标签: asp.net

我有一个列表框项目,例如“我理解并同意......”。为了通知用户,我要求在“我理解”之前在该项目前面添加一个文本,并使用带有绿色的“New:”文本,以便用户了解它是列表框中的新语句。我做了什么使整个列表项变为绿色,我可以在列表项中只将单个文本颜色设置为绿色而不是整个列表项吗?

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

我只需将文字“New:”作为绿色。怎么做?请帮忙。

2 个答案:

答案 0 :(得分:1)

我认为Joel Coehoorn的回答不正确。对于ListBox控件,您不能在lbMenu内放置<span>元素。

ASP.Net中的列表框控件在浏览器中呈现为ListItem元素,其中每个<select>都转换为ListItem元素。可以使用整个<option>元素,但您不能单独设置其中的部分内容。

the MDN web docs,选项元素只允许其中的纯文本(即不允许使用<option>等其他元素。)

  

允许的内容:文字,可能包含转义字符(例如<span>)。

这是一个示例,我在其中添加了标记以设置&eacute;元素内的文本样式。您会注意到整个第二个选项是绿色,而第三个项目的任何部分都不是绿色。

&#13;
&#13;
<option>
&#13;
&#13;
&#13;

但是,您可以使用伪元素插入内容&#34;新&#34;在选项之前,给它绿色。

在下面的代码段中,我已将CSS Class <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>应用于其中一个选项,并添加了内容&#34; New&#34;使用绿色到new-item伪元素。

&#13;
&#13;
::before
&#13;
.new-item::before {
  content: "New: ";
  color: green;
}
&#13;
&#13;
&#13;

ASP.Net中的标记应为:

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

答案 1 :(得分:0)

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