input text field is not same with its contained icons

user_10518202 0
Viewed 84

Here is the input field of my form: enter image description here

its functioning well but not displaying correctly

Here is my code:

<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>

Here the same code in jsFiddle working fine. but not on my page

I don't know where I am making mistake.

Thanks in anticipation

web-frontend frontend forms webforms html
2 Answers
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 */
user_150899330

margin property is adding margin at the top, removing it will solve your problem.

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;
}

Check at JsFiddle

user_150761590
Related