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

Question

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

它运行良好但显示不正确

这是我的代码：

<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 中的相同代码工作正常。但不在我的页面上

我不知道我哪里弄错了。

感谢期待

Answer 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 */

Answer 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

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

input text field is not same with its contained icons

html

forms

frontend

webforms

web-frontend