LoginSignup
noicon
@noicon

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

html、css フォーム、ボタンの表示がうまくできません

Q&A
PHPHTMLCSS

1. やりたい・やりたかったこと

フォームとボタンの色を変更したいのですが、フォームはテキスト入力前の色が変わらない、ボタンは2つのうち一つしか色が変わらないです。
本を参考にしてコードを書いたのですが、なぜ色が変わらないかわかりません。

対象コードはxamppでかいていて、以下はwebに表示させた画面です
OKボタンは装飾されましたが戻るボタンがそのままです。OKと同じように装飾したいです。

Screenshot 2021-05-06 at 23.58.01.png

また、下のように、フォームにテキストを入力すると白くなるのですが、全てのボックス（テキストボックス、セレクトボックス）をテキスト入力前から白くしたいです。

Screenshot 2021-05-06 at 23.56.46.png

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

  1. @noicon

    Questioner
    ありがとうございます！初めての質問で間違えてしまいました。cssのコードを貼り直してみました。

Comments

  1. @noicon

    Questioner
    ありがとうございます！cssのコードを貼り直してみましたので、見ていただけましたら幸いです。
gakisan
@gakisan

12行目の <a> の閉じタグと19行目の <div> の閉じタグが必要そうです。
特に19行目の <div> のクラス属性の値は、 試してみたCSSの .home-content input[type="submit"] と関わりがありそうですね。

0

Comments

  1. @noicon

    Questioner
    cssのコードが貼れていなかったようですが、みていただきありがとうございます。htmlのコードも見てみます。
itagagaki
@itagagaki

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;を入れればよいのではないかと思います。

0

Comments

  1. @noicon

    Questioner
    ありがとうございます！！お礼が遅れまして申し訳ありません。おかげ様で解決しました！

Your answer might help someone💌

LoginSign Up

Popular Questions