如何更改表单标签内的 <hr> 标签颜色？ [复制]答案

【问题标题】：How to change <hr> tag color inside form tag? [duplicate]如何更改表单标签内的 <hr> 标签颜色？ [复制]
【发布时间】：2020-12-26 12:27:26
【问题描述】：

我必须在表单中使用<hr> 标签，但我不能更改它的color。通常 <div> 我可以在 CSS 中更改该标签的颜色，但是当我将它放在 <form> 中时 - CSS 不起作用，<hr> 的整个属性都设置为默认值。有人知道为什么吗？

.编辑

是的，我使用引导程序。

<div class="col-lg-6">
        <div class="box-element" id="form-wrapper">
            <form id="form">
                <div class="user-info row">
                    <div class="col-md-6">
                        <input required class="form-control" type="text"
                               placeholder="Name...">
                    </div>
                    <div class="col-md-6">
                        <input required class="form-control" type="text"
                               placeholder="Email...">
                    </div>
                </div>

                <h6>
                    Shopping information:
                </h6>

                <hr/>

                <div class="shopping-info">
                </div>
                <input type="submit" value="Continue"
                       class="btn my-btn btn-block">
            </form>

        </div>
    </div>

【问题讨论】：

请访问help center，使用tour查看内容和How to Ask。做一些研究，搜索关于 SO 的相关主题；如果您遇到困难，请发布您尝试的minimal reproducible example，并使用[<>] sn-p 编辑器记录输入和预期输出。
您可能有重置样式表或使用引导程序？向我们展示表单、CSS 和可能的框架
这能回答你的问题吗？ Changing the color of an hr element

标签： html css tags

【解决方案1】：

设置<hr>标签的border-color。

form hr {
  border-color: blue;
}

<form>
  This is form with an underline
  <hr>
</form>

【讨论】：

尝试使用样式表而不是像 OP 要求的那样内联

【解决方案2】：

您能与我们分享您的 CSS 和 HTML 代码吗？

hr 标记的属性是（或只是默认属性）：

hr {
  -moz-border-bottom-colors: none;
  -moz-border-image: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  border-color: #EEEEEE -moz-use-text-color #FFFFFF;
  border-style: solid none;
  border-width: 1px 0;
  margin: 18px 0;
}

您可以使用边框属性来设置 hr 元素的样式，如下所示：

/* Red border */
hr.new1 {
  border-top: 1px solid red;
}

/* Dashed red border */
hr.new2 {
  border-top: 1px dashed red;
}

/* Dotted red border */
hr.new3 {
  border-top: 1px dotted red;
}

/* Thick red border */
hr.new4 {
  border: 1px solid red;
}

/* Large rounded green border */
hr.new5 {
  border: 10px solid green;
  border-radius: 5px;
}

有关 hr 标签的更多信息，请查看w3school

【讨论】：