Q&A
https://jsfiddle.net/3sxrqcp8/ 状況が再現しません。他に指定しているCSSなどありませんか？また、確認しているブラウザの種類とバージョンを質問文に追記してください。
<form action="complete.php" method="post" id="contact_form" class="h-adr"> <table> <tbody> <tr> <th>Name/Company name</th> </tr> <tr> <td><input name="name" type="text" id="name" size="50" required></td> </tr> <tr> <th>Phone</th> </tr> <tr> <td><input name="phone" type="text" id="phone" size="50"></td> </tr> <tr> <th>E-mail</th> </tr> <tr> <td><input name="email" type="email" id="email" size="50" required></td> </tr> <tr> <th>Message</th> </tr> <tr> <td><textarea name="message" cols="50" rows="10" id="message"></textarea></td> </tr> <tr> <td><input type="submit" name="submit" id="submit" value="Submit"></td> </tr> </tbody> </table> </form>
#contact_form table tbody tr td #submit{ width: 130px; height: 100px; margin: 20px 0 0 0; }
表題道理なんですが、inputタグでsubmitボタンを作ったんですが、その要素の高さが変わりません。widthは変わるんですが、heightに試しで100px入力しても変わりません。参考サイトを見ているとこれでいいはずなんですが、変更の仕方に問題があるようなので、サイズ変更の仕方をご享受下さい。宜しくお願い致します。
確認したブラウザとバージョンも追記願います。スクリーンショットもあれば。既に回答がありますが100pxでは違いが分かりづらいところもあるかもしれないので、ものすごく大きい値にしてみるとか、明らかに変わってるというのが分かるやり方もご検討ください。
親要素とか全体指定要素も影響するかもしれませんので、他のcss指定も提示可能ですか？
回答2件
0
chromeでは下記のコードでは問題なく高さが反映されます。(height400pxで検証)
cssが読込めていないなどはありませんか？
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>タイトル</title> 6 <style type="text/css"> 7 #contact_form table tbody tr td #submit{ 8 width: 130px; 9 height: 400px; 10 margin: 20px 0 0 0; 11 } 12 </style> 13 <script type="text/javascript"> 14 </script> 15</head> 16<body> 17 <form action="complete.php" method="post" id="contact_form" class="h-adr"> 18 <table> 19 <tbody> 20 <tr> 21 <th>Name/Company name</th> 22 </tr> 23 <tr> 24 <td><input name="name" type="text" id="name" size="50" required></td> 25 </tr> 26 <tr> 27 <th>Phone</th> 28 </tr> 29 <tr> 30 <td><input name="phone" type="text" id="phone" size="50"></td> 31 </tr> 32 <tr> 33 <th>E-mail</th> 34 </tr> 35 <tr> 36 <td><input name="email" type="email" id="email" size="50" required></td> 37 </tr> 38 <tr> 39 <th>Message</th> 40 </tr> 41 <tr> 42 <td><textarea name="message" cols="50" rows="10" id="message"></textarea></td> 43 </tr> 44 <tr> 45 <td><input type="submit" name="submit" id="submit" value="Submit"></td> 46 </tr> 47 </tbody> 48 </table> 49 </form> 50</body> 51</html>
投稿2017/07/24 08:10
総合スコア3027
回答ありがとうございます。コメントの返信おそくなってしまい、申し訳ございません。モバイルの方は反映されていたことに気付いたんですが、PCブラウザでは反映されていませんでした。他の回答者の回答で解決いたしました。ありがとうございました。
0
ベストアンサー
これでどうでしょう？
#contact_form table tbody tr td #submit{
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
width: 130px;
height: 100px;
margin: 20px 0 0 0;
}
投稿2017/07/24 17:00
総合スコア162
返事が遅くなってしまい、申し訳ございません。そして、回答ありがとうございました。上記を入力した所、きちんとサイズが反映されました。私の質問の仕方が悪く、もっと詳細な情報を提示しないといけない中、先を読んで解決策を提示して頂き、誠にありがとうございます。本当に感謝しております。ちなみに、上記を入力すると数値が反映されたのはどういった理由なのでしょうか？？
自分もよくわかりませんが、ほとんどたいていのモダンブラウザでうまく機能するようです。
selectを装飾したいという向きにも好んで使われているようです。
回答ありがとうございます。そうだったんですね。とても参考になりました！！
あなたの回答
tips
プレビュー
