- 締切済み
CSSでのボタンのエフェクト
数字を小さい順にタップしていくコードなのですが この状態だと一度押されたものは背景が変わり押せなくなります ですがCSSでボタンのデザインを変えると押したかどうかわからなくなってしまいます コードは以下の通りです <body> <h1>小さい数字からタッチ!</h1> <p>Time: <span id ="time">0.0</span> sec. </p> <div id="board"> <input type="button" id="button_0" value="?" onclick="touched(0);"> <input type="button" id="button_1" value="?" onclick="touched(1);"> <input type="button" id="button_2" value="?" onclick="touched(2);"><br> <input type="button" id="button_3" value="?" onclick="touched(3);"> <input type="button" id="button_4" value="?" onclick="touched(4);"> <input type="button" id="button_5" value="?" onclick="touched(5);"><br> <input type="button" id="button_6" value="?" onclick="touched(6);"> <input type="button" id="button_7" value="?" onclick="touched(7);"> <input type="button" id="button_8" value="?" onclick="touched(8);"><br> </div> <p><input type="button" value="start!" onclick="timerStart();"></p> <script> var currentNum; var timet; var startTime; var isPlaying = false; function timerStart() { initBoard(); currentNum = 0; startTime = (new Date()).getTime(); if (!isPlaying) { isPlaying = true; runTimer(); } } function initBoard() { var nums = [0,1,2,3,4,5,6,7,8]; var num; var btn; for (var i=0; i<9; i++) { num = nums.splice(Math.floor(Math.random() * nums.length), 1); btn = document.getElementById('button_' + i); btn.value = num[0]; btn.disabled = false; } } function touched(n) { var btn = document.getElementById('button_' + n) if (btn.value == currentNum) { btn.disabled = true; currentNum++; } if (currentNum == 9){ clearTimeout(timer); isPlaying = false; alert('Your Score: ' + document.getElementById('time').innerHTML); } } function runTimer() { document.getElementById('time').innerHTML = (((new Date()).getTime() - startTime) / 1000).toFixed(1); timer = setTimeout(function() { runTimer() ; }, 100); } </script> </body> CSSは #board > input { height: 60px; width: 90px; margin-right : 5px; margin-top : 5px; background: -moz-linear-gradient(top,#09C 0%,#09C 50%,#069 50%,#069); background: -webkit-gradient(linear, left top, left bottom,from(#09C), color-stop(0.5,#09C), color-stop(0.5,#069), to(#069)); border: 1px solid #DDD; color: #FFF; padding: 10px 0; } ですどうすればデザインの変更を保ったまま押されたときに背景を変えることができますか？
- DreamyLife_615
- お礼率12% (16/124)
- JavaScript
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
ご期待とまったく反する回答になりますが、 フォームのコントロールと言うユーザーインターフォース(UI)は、そのデザインを変えてはなりません。やりすぎです。初心者が懲りたい気持ちは分かりますが、javascriptが無効のユーザーはワケワカメになってしまいます。 CSSでも、フォームのUIを変更するプロパティが用意されていません。 CSS3の:checkedなどで、背景は変更できますがデザインは変更すべきではありません。
- fujillin
- ベストアンサー率61% (1594/2576)
CSS3でよければ、そのままで #board > input:disabled { background : red; } とかで、自由に。 そうでなければ、disabled設定の時に別にクラス設定をしてあげて、そのクラスに対して（↑）と同様にCSSを設定しておくのが簡単かと。
補足
下記の中に埋め込めばいいんですか？ #board > input { height:60px; width: 90px; margin-right : 5px; margin-top: 10px; background: -moz-linear-gradient(top,#09C 0%,#09C 50%,#069 50%,#069); background: -webkit-gradient(linear, left top, left bottom,from(#09C), color-stop(0.5,#09C), color-stop(0.5,#069), to(#069)); border: 1px solid #DDD; color: #FFF; padding: 10px 0; }
補足
ボタンを円の形に変えて背景色を付けただけのにしてみましたがこれでも無理ですかね #button_0{ background:#E75A7D; height:60px; width: 60px; margin-right : 5px; margin-top: 10px; font-size:1.3em; outline: none; border-radius: 50%;}