CSSのコードとしてHTMLのコードが示されています。
0Like
html、css フォーム、ボタンの表示がうまくできません
1. やりたい・やりたかったこと
フォームとボタンの色を変更したいのですが、フォームはテキスト入力前の色が変わらない、ボタンは2つのうち一つしか色が変わらないです。
本を参考にしてコードを書いたのですが、なぜ色が変わらないかわかりません。
対象コードはxamppでかいていて、以下はwebに表示させた画面です
OKボタンは装飾されましたが戻るボタンがそのままです。OKと同じように装飾したいです。
また、下のように、フォームにテキストを入力すると白くなるのですが、全てのボックス（テキストボックス、セレクトボックス）をテキスト入力前から白くしたいです。
2. 起きている問題やエラーメッセージ
エラーメッセージは出ていませんが思ったように動きません。
3. 関連するソースコード
以下は実際にweb画面に出すphp、cssのコードです
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>トレカDB</title>
<meta name="description" content="CARD DATABASE">
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
<link href="CSS/style.css" rel="stylesheet">
</head>
<body>
<header class="page-header">
<h1><a href="index.html"><img class="logo" src="images/rushduel-logo.png"></h1>
<ul class="main-nav">
<li><a href="index.html">ホーム</a></li>
<li><a href="index.html">カードリスト</a></li>
<li><a href="index.html">問い合わせ</a></li>
</ul>
</header>
<div class="home-content">
<h1>遊戯王ラッシュデュエル カードデータベース</h1>
<h1>カード検索</h1>
<form method="POST" action="pro_search_done.php">
<p>検索するカード名を入力してください。</p>
<input type="text" name="name" style="width:400px"><br />
<p>検索するカードの種類（モンスター、魔法、罠）を選択してください。</p>
<select class="dropdown" name="attribute">
<option value=''>--- 選択してください ---</option>
<option value="モンスター">モンスター</option>
<option value="魔法">魔法</option>
<option value="罠">罠</option>
</select>
<br />
<!-- <input type="text" name="attribute" style="width:200px"><br /> selectを使わずにユーザーに入力させるときのコード-->
<p>検索するカードの種族（魔法、罠の場合は”なし"）を入力してください。</p>
<input type="text" name="type" style="width:200px"><br />
<p>検索するカードの所有枚数を入力してください。</p>
<input type="text" name="number" style="width:100px"><br />
<br />
<input type="button" value="戻る" onclick="location.href='pro_list.php';"> <!-- なぜか「history.back()だと動かなかった -->
<input type="submit" value="ＯＫ">
</form>
</body>
</html>
これは装飾したcssのコードです
@charset "UTF-8";
html{
font-size: 100%;
}
body{
font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
line-height: 1.7;
color: rgb(56, 42, 28);
background: brown
}
a{
text-decoration: none;
}
h1{
font-size: 3rem;
font-style: italic;
}
p{
font-size: 1.3rem;
}
img{
max-width: 100%;
}
.logo{
max-width: 210px;
margin-top: 14px;
}
.page-header{
display: flex;
justify-content: space-between;
background:black;
}
.main-nav{
display: flex;
align-items: center;
height: max-content;
}
.main-nav li{
margin-left: 36px;
background: rgb(214, 212, 99);
color:black;
margin: 10px;
padding: 10px;
}
.main-nav a{
color: rgb(18, 19, 54);
}
.home-content{
min-height: max-content;
background: brown;
max-width: 100%;
padding: 10% 4%;
}
.footer{
background-color: #000;
position: relative;
z-index: 2;
}
input[type="text"],
.dropdown{
font: 15px/24px sans-serif;
box-sizing: border-box;
width: 100%;
padding: 0.3em;
transition: 0.3s;
letter-spacing: 1px;
color: #aaaaaa;
border: 1px solid #1b2538;
border-radius: 4px;
}
.text{
width: 100%;
max-width: 240px;
}
input[type="button"],
input[type="submit"]{
display: flex;
margin-top: 60px;
margin-left: 100px;
font-weight:bold;
font-style:italic;
text-decoration:none;
font-family:Impact;
box-shadow:inset #ffffff 0px 1px 10px -1px,#b48c34 6px 6px 0px;
box-shadow:inset #ffffff 0px 1px 10px -1px,#b48c34 6px 6px 0px;
-moz-box-shadow:inset #ffffff 0px 1px 10px -1px,#b48c34 6px 6px 0px;
-webkit-box-shadow:inset #ffffff 0px 1px 10px -1px,#b48c34 6px 6px 0px;
background:#ffd66e;
background:-o-linear-gradient(90deg, #ffd66e, #ffcd61);
background:-moz-linear-gradient( center top, #ffd66e 5%, #ffcd61 100% );
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffd66e), color-stop(1, #ffcd61) );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd66e', endColorstr='#ffcd61');
background:-webkit-linear-gradient(#ffd66e, #ffcd61);
background:-ms-linear-gradient(#ffd66e, #ffcd61);
background:linear-gradient(#ffd66e, #ffcd61);
text-indent:0px;
line-height:39px;
-moz-border-radius:3px 0 3px 0;
-webkit-border-radius:3px 0 3px 0;
border-radius:3px 0 3px 0;
text-align:center;
vertical-align:middle;
display:inline-block;
font-size:26px;
color:#9c7113;
width:204px;
height: 70px;
padding:13px;
text-shadow:#ffe9ad 0px 4px 0px;
border-color:#e3bf54;
border-width:1px;
border-style:solid;
}
input[type="button"],
input[type="submit"]:active {
box-shadow:inset #ffffff 0px 1px 10px -1px,#b48c34 6px 0 0px;
box-shadow:inset #ffffff 0px 1px 10px -1px,#b48c34 6px 0 0px;
-moz-box-shadow:inset #ffffff 0px 1px 10px -1px,#b48c34 6px 0 0px;
-webkit-box-shadow:inset #ffffff 0px 1px 10px -1px,#b48c34 6px 0 0px;
position:relative;
top:6px
}
input[type="button"],
input[type="submit"]:hover{
background:#ffcd61;
background:-o-linear-gradient(90deg, #ffcd61, #ffd66e);
background:-moz-linear-gradient( center top, #ffcd61 5%, #ffd66e 100% );
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffcd61), color-stop(1, #ffd66e) );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffcd61', endColorstr='#ffd66e');
background:-webkit-linear-gradient(#ffcd61, #ffd66e);
background:-ms-linear-gradient(#ffcd61, #ffd66e);
background:linear-gradient(#ffcd61, #ffd66e);
}
4. 試したこと
input[type="button"],
input[type="submit"]
を
```css
input[type="submit"]
```css
.home-content input[type="submit"]
などにしてみたりしましたがうまくいきません
0
4Answer
Comments
@noicon
Questionerありがとうございます！初めての質問で間違えてしまいました。cssのコードを貼り直してみました。
装飾をしているのはCSSなので、CSSのコードがあればありがたいです....
0Like
Comments
@noicon
Questionerありがとうございます！cssのコードを貼り直してみましたので、見ていただけましたら幸いです。
12行目の <a> の閉じタグと19行目の <div> の閉じタグが必要そうです。
特に19行目の <div> のクラス属性の値は、 試してみたCSSの .home-content input[type="submit"] と関わりがありそうですね。
0Like
Comments
@noicon
Questionercssのコードが貼れていなかったようですが、みていただきありがとうございます。htmlのコードも見てみます。
OKボタンは装飾されましたが戻るボタンがそのままです。OKと同じように装飾したいです。
input[type="button"],
input[type="submit"]:active {
これは
input[type="button"]:active,
input[type="submit"]:active {
でなければならないですね。:hoverも同様です。
全てのボックス（テキストボックス、セレクトボックス）をテキスト入力前から白くしたいです。
input[type="text"],
.dropdown{
の中に background-color: white;を入れればよいのではないかと思います。
0Like
Comments
@noicon
Questionerありがとうございます！！お礼が遅れまして申し訳ありません。おかげ様で解決しました！