Restrict html input box to max width of a border around it-CodePudding

I have the following html code, with several instances of a border surrounding an input field and two labels. What I'd like to have happen is that all of these are restricted to being within the border surrounding them; what's actually happening though is that the input field are effectively ignoring the border, drawing over it when the input field extends beyond where the border line is. Is there a way to accomplish this? I know I could set the width of the input field, and that should accomplish the goal, but that's not exactly responsive or (in my opinion at least) good UI design. The first time the window is resized it would likely throw off the measurements.

I expect this is probably a rather simple fix, but when I tried to google this for a solution, every result I found was for restricting (or in some cases removing) the border of the input box itself, not an enclosing border.

I would greatly appreciate any help someone could give on this... (BTW, bonus points to anyone that can guess what this is for, since it's so obscure :p ~sarcasm~)

   section, h1 {
        padding: 0 1em;
    }
    
    .grid {
        display: grid;
        grid-template-columns: repeat(3, 150px);
        grid-template-rows: repeat(3, 150px);
        grid-gap: 50px 30px;
    }
    
    .grid-item {
        border: thin #566d7e solid;
        padding: 10px;
    }
    
    .grid-item > label {
        text-align: center;
    }
    
    .grid-item > input {
        margin: 2px;
        word-wrap: true;
    }

    <!DOCTYPE html>
    <html>
        <head>
            <link rel="stylesheet" href="css\abilitiesStyle.css" as="style">
        </head>
    </html>
    <body>
        <header>
        </header>
        <main>
            <article>
                <h1>Abilities, Saves, Senses</h1>
                <section>
                    <div class="grid">
                        <div class="grid-item">
                            <label>STRENGTH</label>
                            <input type="number" name="strengthScore">
                            <label id="strengthModifier"></label>
                        </div>
                        <div class="grid-item">
                            <label>DEXTERITY</label>
                            <input type="number" name="dexterityScore">
                            <label id="dexterityModifier"></label>
                        </div>
                        <div class="grid-item">
                            <label>CONSTITUTION</label>
                            <input type="number" name="constitutionScore">
                            <label id="constitutionModifier"></label>
                        </div>
                        <div class="grid-item">
                            <label>INTELLIGENCE</label>
                            <input type="number" name="intelligenceScore">
                            <label id="intelligenceModifier"></label>
                        </div>
                        <div class="grid-item">
                            <label>WISDOM</label>
                            <input type="number" name="wisdomScore">
                            <label id="wisdomModifier"></label>
                        </div>
                        <div class="grid-item">
                            <label>CHARISMA</label>
                            <input type="number" name="charismaScore">
                            <label id="charismaModifier"></label>
                        </div>
                    </div>
                </section>
            </article>
        </main>
        <footer>
        </footer>
    </body>

CodePudding user response：

You can style the input type by doing input[type=number] and set the width to 100%. I also added - margin-left to center the input field. This method is 100% responsive on all screens.

   section, h1 {
        padding: 0 1em;
    }
    
    .grid {
        display: grid;
        grid-template-columns: repeat(3, 150px);
        grid-template-rows: repeat(3, 150px);
        grid-gap: 50px 30px;
    }
    
    .grid-item {
        border: thin #566d7e solid;
        padding: 10px;
    }
    
    .grid-item > label {
        text-align: center;
    }
    
    .grid-item > input {
        margin: 2px;
        word-wrap: true;
    }
/* additions */    
   input[type=number] {
      width: 100%;
      margin-left: -.2rem;
}

    <!DOCTYPE html>
    <html>
        <head>
            <link rel="stylesheet" href="css\abilitiesStyle.css" as="style">
        </head>
    </html>
    <body>
        <header>
        </header>
        <main>
            <article>
                <h1>Abilities, Saves, Senses</h1>
                <section>
                    <div class="grid">
                        <div class="grid-item">
                            <label>STRENGTH</label>
                            <input type="number" name="strengthScore">
                            <label id="strengthModifier"></label>
                        </div>
                        <div class="grid-item">
                            <label>DEXTERITY</label>
                            <input type="number" name="dexterityScore">
                            <label id="dexterityModifier"></label>
                        </div>
                        <div class="grid-item">
                            <label>CONSTITUTION</label>
                            <input type="number" name="constitutionScore">
                            <label id="constitutionModifier"></label>
                        </div>
                        <div class="grid-item">
                            <label>INTELLIGENCE</label>
                            <input type="number" name="intelligenceScore">
                            <label id="intelligenceModifier"></label>
                        </div>
                        <div class="grid-item">
                            <label>WISDOM</label>
                            <input type="number" name="wisdomScore">
                            <label id="wisdomModifier"></label>
                        </div>
                        <div class="grid-item">
                            <label>CHARISMA</label>
                            <input type="number" name="charismaScore">
                            <label id="charismaModifier"></label>
                        </div>
                    </div>
                </section>
            </article>
        </main>
        <footer>
        </footer>
    </body>