【CSS/html】inputテキストボックスが はみ出る原因と解決方法

「テキストボックスが枠から はみ出てる!?」

inputテキストボックスが はみ出る原因と解決方法を解説します。

【はみ出る原因1】widthが%指定じゃないから

inputのwidthを%以外の単位で指定していると親要素からはみ出ることがあります。

下記の赤枠が親要素の枠、黒枠がinputの枠です。

<style>
.example{
    width: 50%;
    border: 2px solid red;
}
.example input{
    /*コレ*/width: 370px;
    background: #e6f2f5;
}
</style>
<div class="example">
    <input type="text" value="テキストボックス">
</div>

【解決方法】widthかmax-widthを%指定する

inputに「width:100%」を指定すると親要素と同じ幅になりはみ出なくなります。

<style>
.example2{
    width: 50%;
    border: 2px solid red;
}
.example2 input{
    /*コレ*/width: 100%;
    background: #e6f2f5;
}
</style>
<div class="example2">
    <input type="text" value="テキストボックス">
</div>

widthを%以外の単位で指定したいときは「max-width:100%」を追記しましょう。

これを指定するとはみ出そうなときになったときだけ縮んでくれます。

<style>
.example3{
    width: 50%;
    border: 2px solid red;
}
.example3 input{
    width: 370px;
    /*コレ*/max-width: 100%;
    background: #e6f2f5;
}
</style>
<div class="example3">
    <input type="text" value="テキストボックス">
</div>

確かに大きくはみ出ていませんが、右側の線が重なってしまっていますよね？

これの解決方法は下記で解説します。

【はみ出る原因2】paddingとborderはwidthに含まれないから

paddingとborderはwidthに含まれないため「width:100%」を指定していても、左右のpaddingとborderの幅分右に押し出されはみ出てしまいます。

<style>
.example4{
    width: 50%;
    border: 2px solid red;
}
.example4 input{
    /*コレ*/border: 1px solid #333;
    /*コレ*/padding: 10px;
    width: 100%;
    background: #e6f2f5;
}
</style>
<div class="example4">
    <input type="text" value="テキストボックス">
</div>

【解決方法】box-sizing:border-boxを指定する

「box-sizing:border-box」はpaddingとborderをwidthに含めるCSSです。

これを指定するとpaddingとborderが「width:100%」内に収まるため、はみ出なくなります。

<style>
.example6{
    width: 50%;
    border: 2px solid red;
}
.example6 input{
    /*コレ*/box-sizing: border-box;
    border: 1px solid #333;
    padding: 10px;
    width: 100%;
    background: #e6f2f5;
}
</style>
<div class="example6">
    <input type="text" value="テキストボックス">
</div>

【はみ出る原因3】marginを指定しているから

親要素との余白を取ろうと思ってinputにmarginを指定したら、はみ出てしまいました。

「box-sizing: border-box」はmarginまでは含まないためです。

<style>
.example7{
    width: 50%;
    border: 2px solid red;
}
.example7 input{
    /*コレ*/margin: 20px;
    box-sizing: border-box;
    border: 1px solid #333;
    padding: 10px;
    width: 100%;
    background: #e6f2f5;
}
</style>
<div class="example7">
    <input type="text" value="テキストボックス">
</div>

【解決方法】marginを消して親要素にpaddingを指定する

inputにmarginを指定するのではなく、親要素にpaddingを指定しましょう。

<style>
.example8{
    /*コレ*/padding: 20px;
    width: 50%;
    border: 2px solid red;
    box-sizing: border-box;
}
.example8 input{
    box-sizing: border-box;
    border: 1px solid #333;
    padding: 10px;
    width: 100%;
    background: #e6f2f5;
}
</style>
<div class="example8">
    <input type="text" value="テキストボックス">
</div>

widthの%は親要素の「paddingを除いた」widthを基準にします。

よって親要素にpaddingが指定されてもはみ出ません。

親要素にwidthを指定しているときは「box-sizing:border-box」を指定しましょう。

【まとめ】inputがはみ出る原因

【はみ出る原因1】widthが%指定じゃないから
【解決方法】widthかmax-widthを%指定する

【はみ出る原因2】paddingとborderはwidthに含まれないから
【解決方法】box-sizing:border-boxを指定する

【はみ出る原因3】marginを指定しているから
【解決方法】marginを消して親要素にpaddingを指定する

以上、inputテキストボックスが はみ出る原因と解決方法でした。