如何为表单框添加边框？

Posted 2023-03-05

【中文标题】如何为表单框添加边框？

【英文标题】：How can i add border to a form box ?

【发布时间】：2018-01-14 02:31:50

【问题描述】：

我想为引导表单框添加边框。我添加了边框样式属性，但它不起作用。请推荐

thia 是表单框类：

<div class="form-box">
                   <div class="form-top">
                                <div class="form-top-left">

这是css：

.form-box 
    margin-top: 0px;
      border-radius: 25px;
    border-bottom-style: solid;
    border-color: #50e54b;

【问题讨论】：

什么意思？似乎可以在现有边框上正常工作，或者只是应用一个新边框codepen.io/mcoker/pen/PKWEwp

【参考方案1】：

由于其他类，使用“！important”

border: solid 2px #50e54b!important;

【参考方案2】：

您可以使用边框 CSS 属性 [border](https://developer.mozilla.org/en-US/docs/Web/CSS/border)

为您的框添加边框

这是一个示例用法：

border: 1px solid #FFFFFF;

上面的代码将添加一个厚度为 1 像素、颜色为白色的实心边框。

单击上面的链接以查看有关边框属性的更多信息。

【参考方案3】：

据我所知，代码运行良好。但是如果你愿意，你可以添加一个 8px 的内边距，这样内容就有了放置的空间，而不是被边框塞在里面。顺便说一句，2px 或 4px 的边框半径看起来更适合边框，但这取决于您。

.form-box 
  padding: 8px; /*makes it look neat*/
  border-radius: 4px; /*or 2px*/
  border: 1px solid red;