ボタンを羅列するプログラム(PHP)にCSSを適用させたい

前提・実現したいこと

cssでボタンのサイズを変えたいと考えています。
しかし、現在自分が作成しているコードだと反映されません。
phpを用いてボタンを配列するプログラムなのですが、phpだから反映されないのか、変数のため、classがボタンごとに変わってしまうからなのか、どのような原因で反映されないかがわかりません。

該当プログラムでcssが反映されるようにしたいです。
詳しい方教えていただけると幸いです。
よろしくお願いいたします。

発生している問題・エラーメッセージ

ボタンのサイズを変更するcssのコードが反映されない。

該当のソースコード

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<link href="0001.css" rel="stylesheet" type="text/css">
</head>

<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
	$(document).on('click','.cx',function(){
    $(this).prev(':checkbox').trigger('click');
  });
$(function(){
  $('#go').on('click',function(){
    $.ajax({
    url:"get.php",
    data:{r1:$('#r1').val(),r2:$('#r2').val(),c1:$('#c1').val(),c2:$('#c2').val(),},
    }).done(function(data){
      $('#view').html(data);
    });
  }).trigger('click');
});
</script>
<form>
<input type="text" name="r1" id="r1" value="a">
<input type="text" name="r2" id="r2" value="c"><br>
<input type="text" name="c1" id="c1" value="1">
<input type="text" name="c2" id="c2" value="5"><br>
<input type="button" value="go" id="go">
</form>

<hr>
<div id="view"></div>
<style>
[name="c[]"]{display:none;}
[name="c[]"]:checked + .cx{background-Color:yellow;}
</style>
<?php
$r1=filter_input(INPUT_GET,"r1");
$r2=filter_input(INPUT_GET,"r2");
$c1=filter_input(INPUT_GET,"c1");
$c2=filter_input(INPUT_GET,"c2");
foreach(range($r1,$r2) as $r){
  foreach(range($c1,$c2) as $c){
    print "<input type='checkbox' name='c[]' id='c{$r}-{$c}' value='{$r}-{$c}'><input type='button' value='{$r}-{$c}' class='cx'>";
	  
  }
  print "<br>";
}
	
?>
</body>
</html>

css
1@charset "utf-8";
2/* CSS Document */
3button.cx
4{
5
6
7    font-size: 3.4em;
8
9    font-weight: bold;
10
11    padding: 20px 30px;
12	
13    width:100px;
14	
15	height:50px;
16	
17}
18

試したこと

htmlでボタンを一つ作成し、それにcssを反映させることはできました。

html
1<!doctype html>
2<html>
3<head>
4<meta charset="utf-8">
5<title>無題ドキュメント</title>
6<link href="0001.css" rel="stylesheet" type="text/css" >
7</head>
8
9<body>
10	<button class="cx" type="submit">Button</button>
11</body>
12</html>

css
1@charset "utf-8";
2/* CSS Document */
3button.cx
4{
5
6
7    font-size: 3.4em;
8
9    font-weight: bold;
10
11    padding: 20px 30px;
12	
13    width:100px;
14	
15	height:50px;
16	
17}
18

補足情報（FW/ツールのバージョンなど）

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

回答3件

button.cxは<button class="cx">に適用されます。<input type="button" class="cx">には適用されません。

セレクタをinput[type="button"].cxにするか、<button>要素を生成するようにしましょう。

投稿2018/11/21 05:04

maisumakun

総合スコア145183

buttonタグではなく、inputのbuttonを使用しているからでは？

投稿2018/11/21 05:04

dice142

総合スコア5158

###回答依頼をいただいたので

既に回答がついていますが、回答依頼をいただいたので、ちょっと長くなりますが、何個か対策をご紹介します。

###整理すること

CSSを適応したいのは、<button>タグ、<input type="button">もしくは<input type="submit">どれでしょう？
全部ボタンのように見えますが役割は違いますが、質問者さんは理解されていますか？

もし理解が不足しているようで自分で再学習不可能な場合にはこの回答に対するコメントでかまわないので申し出てください。

###とりあえずの対策

変えたいのはボタンのサイズだけですよね。

それなら邪道ですが、JavaScriptとか使わなくてもPHPから出力する大きさを指定したい部分で

style="width:PX/%/PT/EM; hight:PX/%/PT/EM;"

のようにサイズを変更したいタグに含めてしまいましょう。

<button style="width:200PX;hight:300PX;">ボタンの表示名</button>

または

<input type="submit style="width:60%; hight:50%" value="PHPに渡したときの値">

のようにです。

これはあくまでも応急対策で多用するとブラウザの読み込み時間を増大させる可能性があります。

###もう少しスマートに

やっぱりScript Creatorなるものできるだけスマートにしたいですよね。
だけどJavaScript不要です。
PHPの
print <<<めたもじ
出力内容
メタ文字;
のようにしてCSSを含む動的ソースを出力してしまいましょう。

<?php
print <<<sanmojiijounaranandemoOK

<html>
<head>
<style type="text/css">
#'{$id}'{
width:20PX;
hight:70px;
}
#'{$id2}'{
width:30%;
hight:40%;
}
</style>
</head>
<body>
<button id="'{$id}'">ボタン</button>

<form action="csstest.php" method="post">
<input type="submit" id="{'{$id2}'"name="phpname" value="phpvalue">
</form>
</body>
</html>

sanmojiijounaranandemoOK;

?>

のようにします。

IDアトリビュートの値は各ページで唯一である必要があります。
###そもそもサイズだけなら

本当にCSSじゃなきゃ対処できないですか？

<button width="50px" hight="70px">ボタンの表示名</button>
とか
<input type="button" width="10%" hight="10%">
とかじゃだめですか？

CSSはブラウザによって効果が様々だったりするので、どうしてものときとブラウザの対応状況によっては一部の利用者で意図した表示が実現できない事象が発生する場合があるので用いるときには最大限の注意を！

###最後にJavaScriptの併用について

JavaScriptを使う多くの場合は、ページを読み込んだあとで、サーバーと通信しなくてもページのデザインやレイアウトをcssの値を変更したりhtmlのアトリビュートを追加または削除もしくは変更したりする目的のことが多いです。

###そんなわけで

どの言語にどの役割を持たせるのか、言語の特性と制限をよく理解して
ここはHTML

ここはPHP

ここはCSS

ここはJavaScript