Question

试图在选项标签中添加两个文本，其中两个文本应使用不同的颜色。但是，以下代码无法正常工作。.请帮助我在此CSS或JS中添加什么。.如果没有使用任何插件，还建议我。

<script>
function showTemplate() {
  alert(document.querySelector('#hit-template').innerHTML);
}
</script>
<script id="hit-template" type="text/template">
	<table class="table">
		<thead>
			<tr>
				<th>
				name
				</th>
				<th>
				brand
				</th>
				<th>
				price
				</th>
			</tr>
		</thead>
		<tbody>
			@{{#hits}}
				<tr>
					<td>
					@{{fname}}
					</td>
					<td>
					@{{email}}
					</td>
					<td>
					@{{age}}
					</td>
				</tr>
			@{{/hits}}
		</tbody>
	</table>
</script>
<button onclick="showTemplate()">show template</button>

Answer 1

如果要更改文本后面的背景，请尝试以下操作：

<select name="dropdown" title="Corporate Select" class="custom-select" id="target" aria-label="Corporate Select">
            <option selected>Select</option>
            <option value="" style="background-color: yellow;">Offers<span class="calc">New </span></option>
            <option value="" style="background-color:red;">Discounts<span class="calc">New </span></option>

或者，如果您只是想让文本使用不同的颜色：

<select name="dropdown" title="Corporate Select" class="custom-select" id="target" aria-label="Corporate Select">
            <option selected>Select</option>
            <option value="" style="color: yellow;">Offers<span class="calc">New </span></option>
            <option value="" style="color:red;">Discounts<span class="calc">New </span></option>

Answer 2

不。您不能在中使用标签。但是您可以在此处使用CSS技巧。

<select name="dropdown" title="Corporate Select" class="custom-select" id="target" aria-label="Corporate Select">
                <option selected>Select</option>
                <option class="yellowText" value="" style="background-color: yellow;">Offers</option>
                <option class="redText" value="" style="background-color:red;">Discounts</option>
    </select>

样式将如下：

<style>
.yellowText::after{
      content: 'New';
      height: 25px;
      width: auto;
      color: yellow;
      font-size: 14px;
}
.redText::after{
      content: 'New';
      height: 25px;
      width: auto;
      color: red`enter code here`;
      font-size: 14px;
}
</style>

是否可以在<option>标记内使用<span>标记

2 个答案: