CODEWITHSUNDEEP
htmlcss
Alex Lavriv
Alex Lavriv

Reputation: 321

Width of html input is not inherited from the parent

I am trying to understand deeply the HTML/CSS behavior, in the following example the birth date input width is shorter than the other inputs. When I am setting its width to 100%, it gets out the boundaries of the parent div. What am I doing wrong?

HTML:

<body>  
    <div class="form">
        <input type="text" placeholder="Last Name">
        <input type="text" placeholder="First Name">
        <input type="text" placeholder="Country">
        <div>
            <input type="text" id="birthDate" placeholder="Birth Date">
            <span class="dateFormat">YYYY-MM-DD</span>
        </div>
    </div>
</body>

CSS:

.form input {
    margin:5px;
    height: 30px;
    padding: 5px;
}
.form {
    display: grid;
    margin: auto;
    width: 50%;
    grid-template-columns: 1fr 1fr;
}

JSFIDDLE:
https://jsfiddle.net/AlexLavriv/oxmq71sn/

Upvotes: 1

Views: 2772

Answers (1)

Rajan Benipuri
Rajan Benipuri

Reputation: 1832

You will have to add styling rule for your input as well. Please use the below code as reference.

.form input {
    margin:5px;
    height: 30px;
    padding: 5px;
}
.form {
    display: grid;
    margin: auto;
    width: 50%;
    grid-template-columns: 1fr 1fr;
}

input[type=text]{
width: 100%;
}
<body>  
    <div class="form">
        <input type="text" placeholder="Last Name">
        <input type="text" placeholder="First Name">
        <input type="text" placeholder="Country">
        <div>
            <input type="text" id="birthDate" placeholder="Birth Date">
            <span class="dateFormat">YYYY-MM-DD</span>
        </div>
    </div>
</body>

Hope this help

Upvotes: 2

Related Questions