Input type="text"のサイズが送信後に変わってしまう

テキストボックスにCSSをかけていますが，submit後にサイズが変わってしまいます。

サイズが変わってしまう現象を止めるにはどうすればよいのでしょうか。

テキストボックスのCSSコードを貼っておきます。

HTML
1<label for="f1">初期値</label>
2<br>
3<input name="value_1" type="text" id="f1" class="box_text">

CSS
1.box_text {
2    padding:10px;
3    border:solid 2px #ccc;
4    margin:0 0 10px;
5    font-size:1em;
6    width:calc(100% - 24px);
7    -webkit-border-radius: 4px;
8    -moz-border-radius: 4px;
9    border-radius: 4px;
10}

サイズは元のものより若干小さくなってしまいます。

よろしくお願いいたします。

kei344

2019/03/04 02:26

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。

taichonon

2019/03/04 02:45

すみません，修正しました

行動規範の内容に同意します

回答2件

自己解決

PHPのHTML外出力を消したところ解消

投稿2019/03/04 02:18

taichonon

総合スコア16

全体像がわかりません、以下とくに「サイズが変わる」という現象が
確認できません

HTML
1<style>
2.box_text {
3    padding:10px;
4    border:solid 2px #ccc;
5    margin:0 0 10px;
6    font-size:1em;
7    width:calc(100% - 24px);
8    -webkit-border-radius: 4px;
9    -moz-border-radius: 4px;
10    border-radius: 4px;
11}
12</style>
13<form>
14
15<label for="f1">初期値</label>
16<br>
17<input name="value_1" type="text" id="f1" class="box_text">
18<input type="submit" value="send">
19</form>
20