我正在尝试使用 <input type="button"> 设置按钮样式而不仅仅是 <button> .使用我的代码，按钮一直延伸到整个屏幕。我只想让它适合按钮中的文本。有什么想法吗？
参见 jsFiddle Example或继续阅读 HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>WTF</title>
</head>
<style type="text/css">
.button {
color:#08233e;
font:2.4em Futura, ‘Century Gothic’, AppleGothic, sans-serif;
font-size:70%;
padding:14px;
background:url(overlay.png) repeat-x center #ffcc00;
background-color:rgba(255,204,0,1);
border:1px solid #ffcc00;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border-bottom:1px solid #9f9f9f;
-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
cursor:pointer;
}
.button:hover {
background-color:rgba(255,204,0,0.8);
}
</style>
<body>
<div class="button">
<input type="button" value="TELL ME MORE" onClick="document.location.reload(true)">
</div>
</body>
你真的想为 <div> 设置样式吗？ ？或者你想为 <input type="button"> 设置样式吗？ ？如果你想要后者，你应该使用正确的选择器:
input[type=button] {
color:#08233e;
font:2.4em Futura, ‘Century Gothic’, AppleGothic, sans-serif;
font-size:70%;
/* ... other rules ... */
cursor:pointer;
}
input[type=button]:hover {
background-color:rgba(255,204,0,0.8);
}
另见: