按钮文字消失了

Question

我正在尝试创建一个带有提交按钮的表单。我正在尝试将一些 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" />

Answer 1

使用 button 元素代替 div。

请注意，button 的默认 type 是 submit，因此您可以删除它。

#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>

可以在此处找到使用 button 而不是 input type="submit" 的 Whosebug 答案：

Answer 2

当前：

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

使用以下代码更新 html 代码：

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

Answer 3

使用

#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" />

按钮文字消失了

Button text has disappeared

html

css

submit

button