在HTML按钮的文本部分添加颜色

Question

我有一堆HTML按钮，其中一些具有类似于“Title*”的值，希望星号可以以红色显示，而文本的其余部分为黑色。这可行吗？

我找到了以下代码建议可以改变文本颜色：

<form>
<input type="button" value="this is a styled text button" style="color:#fff;">
</form>

这种情况下，是否可以修改代码以便只影响值中的某些部分？

- numfar

Answer 1

你需要像其他人建议的那样使用span。然而，我完全避免使用带有style属性的内联CSS。而是使用类。不知道使用情况的上下文如何推荐如何应用CSS，但以下是一个示例：

HTML：

<button class="starred">Title <span>*</span></button>

CSS：

button.starred span { color: #f00; }

- prodigitalson

---

我认为我应该在我的问题中写一些进一步的信息。我不能使用<button>，因为我不是直接使用HTML，而是通过Drupal表单API进行操作。因此，我需要使用<input>。我所做的是定义一个PHP数组，您可以在其中指定<input>的属性，因此我想知道如果可能的话，它在HTML中的样子，以便知道如何定义表单数组。 - numfar

那么，你需要钩入表单 API 并更改输出，无论你如何应用颜色。 - prodigitalson

Answer 2

把那个星号*放在一个span标签里，像这样：

<button type="button">Title <span style="color:red;">*<span></button>

更新：

 <style>button>span{style="color:red;"}</style>
    <button type="button">Title <span>*<span></button>

- user1432124

---

@RasmusFranke 不需要因为我更喜欢使用 button 而不是 input type="button" 而对我进行负评。 - user1432124

你偷了我的赞，你知道吗？你把你的错误答案改成了我的。 - Engineer

@Random 我之前错误地评论并点了踩，因为我以为你的解决方案不会起作用，但是我错了，所以我改为点赞并删除了我的评论。 - Rasmus Franke

这将实现 OP 想要的功能，但应避免使用带有 style 属性的行内样式。只有在极特定的情况下，它们才有意义。根据提供的信息，这不是这些情况之一。 - prodigitalson

我完全同意，但这里的主要工作是告诉如何改变颜色而不是提高性能。 - user1432124

@Random：从我的角度来看，这并不是一个性能问题...而是一个可维护性问题。如果有人以后需要将所有这些更改为#0f0，该怎么办？我是说可以使用查找和替换，但那只是愚蠢的做法，因为它本可以在一个地方（即CSS文件）进行更改。 - prodigitalson

Answer 3

你可以使用<button>标签代替<input type="button"/>，并且可以样式化其标签：

<button>Title<span style="color:#f00">*</span></button>

- Engineer

---

@RasmusFranke 在你的评论之前，我已经添加了。 - Engineer

@RasmusFranke 你为什么给Random的答案点赞？那是从我的答案中纯粹复制粘贴的。 - Engineer

@工程师，如果你在10秒之前回答问题，并不意味着其他人都是从你那里抄袭。 - user1432124

我很想因为抱怨而给这个帖子点个踩，但我的修养不允许。这个论坛是用来争夺个人资料中的赞和积分，还是用来帮助别人解决问题的？如果你真的非常依赖这些积分，因为你需要靠它们来买食物，那就告诉我，我会给你一个赞。 - Sven Bieder

@Random 如果您在首次发布答案后不到5分钟内进行更改，则编辑历史记录不会保留更改。您在此期间进行了复制粘贴操作。 - Engineer