使用 CSS 更改按钮颜色
[英]Changing button colour using CSS
问题描述
I have this html, that uses a bit of Javascript.
我有这个 html，它使用了一些 Javascript。 I am trying to change the colour of the button using CSS.我正在尝试使用 CSS 更改按钮的颜色。 The CSS is in a file called getreplies.css and contains CSS 位于名为 getreplies.css 的文件中，其中包含
.button { color: red; }
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="getreplies.css"> </head> <input class="button" type="button" onclick="location.href='path/messages.pl?name=<TMPL_VAR NAME=name>&page=<TMPL_VAR NAME=page>';" value="<TMPL_VAR NAME=page>"> </html>
But it doesn't work.但它不起作用。 I don't see any changes.我没有看到任何变化。 Also, can someone tell me how I can centre these buttons using CSS as well?另外，有人可以告诉我如何使用 CSS 将这些按钮居中吗？ Thanks for any help!谢谢你的帮助！
PS if it helps, then I am doing this within a perl cgi script. PS 如果有帮助，那么我将在 perl cgi 脚本中执行此操作。
6 个解决方案
解决方案1
1 2017-10-29 08:01:57
The code you've provided in the question works in isolation. 您在问题中提供的代码是独立运行的。
Open the developer tools in your browser. 在浏览器中打开开发人员工具。 Look at the Network tab. 查看网络标签。 Look at the response for the request for getreplies.css . 查看对getreplies.css请求的响应。
You will probably see a 500 Internal Server Error. 您可能会看到500 Internal Server Error。
(Since you haven't done this debugging I'm going to assume that that is the case as this is the most likely explanation for what you are seeing) （由于您尚未进行此调试，因此我将假定是这种情况，因为这是您所看到的内容的最可能的解释）
if it helps, then I am doing this within a perl cgi script
A typical configuration for CGI is to specify that a directory (often /cgi-bin/ ) contains CGI scripts and only CGI scripts. CGI的典型配置是指定目录（通常为/cgi-bin/ ）包含CGI脚本，并且仅包含CGI脚本。
Since getreplies.css is a relative URI, if your script is /cgi-bin/example.cgi then your stylesheet will be /cgi-bin/getreplies.css and your web server will attempt to execute it as a CGI script. 由于getreplies.css是相对URI，因此，如果您的脚本是/cgi-bin/example.cgi则样式表将是/cgi-bin/getreplies.css并且您的Web服务器将尝试将其作为CGI脚本执行。
Since it isn't executable, this fails. 由于它不是可执行文件，因此失败。
Move the stylesheet out of the cgi-bin . 将样式表移出cgi-bin 。
解决方案2
1 2021-08-26 16:23:42
You can try this code:你可以试试这个代码：
function setColor(e) { var target = e.target, status = e.target.classList.contains('active'); e.target.classList.add(status ? 'inactive' : 'active'); e.target.classList.remove(status ? 'active' : 'inactive'); }
.active { background-color: #7FFF00; } .inactive { background-color: #FFFFFF; }
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="getreplies.css"> </head> <input type="button" id="button" value="button" style="color:blue" onclick="setColor(event)"; data-count="1" /> </html>
解决方案3
0 2017-10-29 07:15:03
Looks like you've spelt button wrong in your css. 看起来您的CSS中的按钮拼写错误。
.buton{
color: red;}
should be. 应该。
.button{
color: red;}
Lee. 李
解决方案4
-1 2017-10-29 07:24:04
To style your button you should use input[type=button] {color: red; } 要为按钮设置样式，应使用input[type=button] {color: red; } input[type=button] {color: red; }
Or change the class name .button to something else lime .mybutton 或将类名.button更改为其他名称.mybutton
Hope this help 希望这个帮助
解决方案5
-1 2017-10-29 07:28:06
.button{background-color:red;margin:0 auto;}
and put 并把
text-align:center;
on the containing element 在包含元素上
Also you may need to clear your cache or put ?v=0.001 in the url like 另外，您可能需要清除缓存或在网址中添加？v = 0.001，例如
<link rel="stylesheet" href="getreplies.css?v=0.0001">
to see your mods every refresh 看到你的国防部每次刷新
解决方案6
-1 2017-10-29 07:37:14
You need to use background-color instead of color , example: 您需要使用background-color而不是color ，例如：
.button{
background-color: red;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.