输入文本字段与其包含的图标不同答案

【问题标题】：input text field is not same with its contained icons输入文本字段与其包含的图标不同
【发布时间】：2021-05-25 12:08:57
【问题描述】：

这是我的表单的输入字段：

它运行良好，但显示不正确

这是我的代码：

<div class="form-group">
        <label for="datepicker">Expire Date</label>
        <div class="form-group">
            <div class="input-group date-select-with-expire-option">
                <div class="input-group-prepend">
                    <span class="input-group-text"> <i
                        class="far fa-calendar-alt"></i>
                    </span>
                </div>
                <input type="text" class="form-control date-input"
                    name="SelectedDate" placeholder="Select date" />
                <div class="input-group-append">
                    <div class="input-group-text">
                        <div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input expire-option"
                                name="DateNeverExpires" id="never-expired"> <label
                                class="custom-control-label" for="never-expired"> Never
                                expires </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

jsFiddle 中的相同代码工作正常。但不在我的页面上

我不知道我在哪里犯错了。

感谢期待

【问题讨论】：

你能不能也分享一下 CSS 并让它在代码 sn-p 中运行。
@MuhammadHuzaifa 我在我的问题中添加了 jsFiddle，但奇怪的是在 JSFiddle 中工作正常但不在我的页面上
某些东西覆盖了引导类的样式。如果您使用的是自定义 CSS，请检查一下。
@MuhammadHuzaifa。谢谢指点。我发现我的一个 css 是冲突的。我已经更新了 jsFiddle 链接。请检查并告诉我如何解决它

标签： html forms webforms frontend web-frontend

【解决方案1】：

input[type=text], select {
    width: 100%;
    padding: 6px 20px;       /* Changed padding to 6px */
    margin: 0px 0px;         /* Changed margin to 0px */
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type=submit] {
    width: 100%;
    background-color: #4CAF50;
    color: white;
    padding: 6px 20px;       /* Changed padding to 6px */
    margin: 0px 0px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.far {
    line-height: 1.5!important; /* Took the class .far and force-changed the 
                                   property with !important */

【讨论】：

请添加解释以帮助原始发布者理解为什么这对他们有用。这也有助于以后阅读这篇文章的读者，他们也会明白这个答案是否适用于他们的问题。
对不起@PeterS，我是新手，不知道如何像其他答案一样添加粗体标题。我在代码本身中添加了 cmets 来解释。感谢您的提示！
没问题，请看看经验丰富的贡献者的其他答案，你会看到他们是如何回答问题的，有一些散文，然后是一些代码（足以理解）。只是代码有时没有一般上下文，如果框架更新，可能会过时。散文有助于这种情况。

【解决方案2】：

margin 属性在顶部添加边距，删除它会解决您的 问题。

input[type=text], select {
  width: 100%;
  padding: 12px 20px;

  /* margin: 8px 0; */ # Remove this

  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

查看JsFiddle

【讨论】：

现在删除边距的问题是它影响了许多其他形式。我怎么能不将这个 css 用于这个特定的输入字段，而其余的仍然照常
您可以在此表单中添加一个额外的类并使用该类覆盖 CSS。