ボタンのテキストが消えました

送信ボタンでフォームを作成しようとしています。スタイルシートのボタンにCSSを適用しようとしていますが、何らかの理由でテキストがボタンから消えてしまいました！スタイルシートからすべてのCSSを削除（またはdivからIDを削除）すると、デフォルトのスタイルに切り替わるのではなく、ボタンが完全に消えます。誰かが私が間違っていることを教えてもらえますか？ボタンのテキストが消えました

HTML：

#submit 
 
    { 
 
     background-color: #5AB753; 
 
     color: black; 
 
     text-align: left; 
 
     border: none; 
 
     border-radius: 5px; 
 
     position: absolute; 
 
     left: 683px; 
 
     top: 500px; 
 
     width: 170px; 
 
     height: 51px; 
 
     font-family: 'Lato'; 
 
     text-align: center; 
 
     font-size: 30px; 
 
     color: #FFFFFF; 
 
     float: left; 
 
    } 
 

 
    #submit:hover 
 
    { 
 
     background-color: #96D091; 
 
     float: left; 
 
    }

<div id="submit" type="submit" value="Join now" />

出典

2017-10-10 Bug Catcher

代わりdivのbutton要素を使用します。

のデフォルトのtypeはsubmitであるため、削除することができます。 input type="submit"上buttonを使用するには十分な理由と

#submit { 
 
    background-color: #5AB753; 
 
    color: black; 
 
    text-align: left; 
 
    border: none; 
 
    border-radius: 5px; 
 
    position: absolute; 
 
    left: 683px; 
 
    top: 500px; 
 
    width: 170px; 
 
    height: 51px; 
 
    font-family: 'Lato'; 
 
    text-align: center; 
 
    font-size: 30px; 
 
    color: #FFFFFF; 
 
    float: left; 
 
} 
 

 
#submit:hover { 
 
    background-color: #96D091; 
 
    float: left; 
 
}

<button id="submit">Join now</button>

A StackOverflowの答えはここで見つけることができます：https://stackoverflow.com/a/33663114/5561605

出典

2017-10-10 15:58:06 sol

はもちろん、それはそれと同じくらい簡単でした。私はこれをできるだけ早く答えとしてマークします（この時間制限のためにまだできません） –

電流：以下のコードで

<div id="submit" type="submit" value="Join now" />

更新htmlコード：

<input id="submit" type="submit" value="Join now" />

出典

2017-10-10 16:00:54

このコードを読んでいただきありがとうございます。すぐに役立つかもしれません。なぜこれが問題の良い解決策であるのかを示すことによって、適切な説明が教育上の価値を大幅に改善し（https://meta.stackexchange.com/q/114762）、将来の類似した読者にとっては、しかし、同一ではない質問。説明を追加するためにあなたの答えを編集し、どのような制限と前提が適用されるかを示してください。 – GrumpyCrouton

使用

#submit 
 
{ 
 
    background-color: #5AB753; 
 
    color: black; 
 
    text-align: left; 
 
    border: none; 
 
    border-radius: 5px; 
 
    position: absolute; 
 
    left: 683px; 
 
    top: 500px; 
 
    width: 170px; 
 
    height: 51px; 
 
    font-family: 'Lato'; 
 
    text-align: center; 
 
    font-size: 30px; 
 
    color: #FFFFFF; 
 
    float: left; 
 
} 
 

 
#submit:hover 
 
{ 
 
    background-color: #96D091; 
 
    float: left; 
 
}

<input id="submit" type="submit" value="Join now" />

出典

2017-10-10 16:01:31 Gattbha

ボタンのテキストが消えました

答えて

関連する問題