Im trying to make a small menu with 3 text input boxes, but when I add width to them, they ignore it. When I style the div class, so seperately, they ignore the width and height given and when i just style the input, It works. I want to style them seperately though. The inpt4 is the one that want to give width to.

<style>
        body
        {
            background-color: #b3d9ff;
        }

        #container
        {

        }

        .button1
        {
            position: absolute;
            top: 25vw;
            left: 52vw;
        }

        .button2
        {
            position: absolute;
            top: 25vw;
            left: 45vw;
        }

        input
        {
            height: 2vw;
            width: 4vw;
            display: block;
            color: black;
            background-color:;
            border-radius: 1vw;
        }

        input:hover {background-color: ;}

        input:active
        {
            background-color: ;
            box-shadow: 12 5px #666;
            transform: translateY(8px);
        }

        .vragen
        {
            text-align: center;
        }

        button
        {
            height: 3vw;
            width: 30vw;
            border-radius: 1vw;
        }

        .lang
        {
            height: 5.3vw;
        }

        .popup
        {
            border: 0.5vw solid black;
            text-align: center;
            background: #a6a6a6;
            position: fixed;
            top: 10vw;
            left: 70vw;
            border-radius: 1vw;
            padding: 0 13vw 10vw;
        }

        button:hover {background-color: #cccccc;}

        .inpt1
        {
            position: absolute;
            top: 8.5vw;
            left: 12.5vw;
        }

        .inpt2
        {
            position: absolute;
            top: 8.5vw;
            left: 7.5vw;
        }

        .inpt3
        {
            position: absolute;
            top: 9.5vw;
            left: 21.6vw;
        }

        .vraag
        {
            position: absolute;
            top: 1vw;
            left: 1vw;
        }

        .volgvraagid
        {
            position: absolute;
            top: 1vw;
            left: 18vw;
        }

        .antwoord
        {
            position: absolute;
            top: 7vw;
            left: 10vw;
        }

        .inpt4
        {
            width: 2vw;
        }

And here are the div classes

    <div >
        <input type="text" name="name">
   </div>

    <div >
        <input type="text" name="name">
    </div>

    <div >
        <input type="button" value="Opslaan"/>
    </div>

    <div >
        <input type="text" name="name"/>
    </div>

here is the screenshot of the 3 textboxes

CodePudding user response：

By changing with of inpt4 class, you are just increasing the width of input tag's wrapper class. As a result, the wrapper's width is increasing but input remains of the same width.

Try to make input tag the full width of its wrapper class.

.inpt4 input {
  width: 100%;
}