按钮文字已消失

我正在尝试使用提交按钮创建表单。我试图将一些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

使用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>

出现StackOverflow的答案有很好的理由使用button在input type="submit"可以在这里找到：https://stackoverflow.com/a/33663114/5561605

来源

2017-10-10 15:58:06 sol

当然，它是这么简单。我将此标记为一个答案asap（由于这个时间限制，不能这样做） –

电流：

<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

按钮文字已消失

回答

相关问题