我有一个带有表单的JSF页面。我可以修改此表单的几乎所有属性，但不能修改背景颜色。到目前为止，我已经从CSS这样尝试过：
.login_panel {
background-image: none;
background: gainsboro !important;
background-color: gainsboro !important;
width: 50%;
font-family: monospace;
font-size: 12px;
}
并将此样式类应用于以下形式
<h:form styleClass="login_panel">...
嗯，每种设置都可以，但是背景仍然是白色。有什么方法可以更改表单的bgcolor？到目前为止，我找不到任何答案。
@Edit：生成的HTML源：
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head><link type="text/css" rel="stylesheet" href="/Jenny/faces/javax.faces.resource/theme.css?ln=primefaces-aristo" /><link type="text/css" rel="stylesheet" href="/Jenny/faces/javax.faces.resource/primefaces.css?ln=primefaces&v=3.0" /><script type="text/javascript" src="/Jenny/faces/javax.faces.resource/jquery/jquery.js?ln=primefaces&v=3.0"></script><script type="text/javascript" src="/Jenny/faces/javax.faces.resource/primefaces.js?ln=primefaces&v=3.0"></script>
<title>WebMethods Testing Suite</title>
<link rel="stylesheet" type="text/css" href="design/style.css" /></head><body style="margin-left: auto; margin-right: auto">
<center>
<h1>Jenny</h1>
<!-- Login to the integration server -->
<form id="j_idt8" name="j_idt8" method="post" action="/Jenny/faces/index.xhtml" class="login_form" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt8" value="j_idt8" />
<div id="j_idt8:server_data" class="ui-panel ui-widget ui-widget-content ui-corner-all login_panel"><div id="j_idt8:server_data_content" class="ui-panel-content ui-widget-content"><table>
<thead>
<tr><th colspan="2" scope="colgroup">
Servers
</th></tr>
</thead>
<tfoot>
<tr><td colspan="2"><button id="j_idt8:j_idt16" name="j_idt8:j_idt16" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" onclick="PrimeFaces.ab({formId:'j_idt8',source:'j_idt8:j_idt16',process:'@all',update:'j_idt8:status'});return false;" type="submit"><span class="ui-button-text">Connect</span></button><script id="j_idt8:j_idt16_s" type="text/javascript">PrimeFaces.cw('CommandButton','widget_j_idt8_j_idt16',{id:'j_idt8:j_idt16'});</script>
<br /><label id="j_idt8:status">
Not initialized...</label></td></tr>
</tfoot>
<tbody>
<tr>
<td><label for="j_idt8:url" class="output_label">
Server address</label></td>
<td><table id="j_idt8:url">
<tr>
<td>
<input type="radio" name="j_idt8:url" id="j_idt8:url:0" value="10.125.112.20:10601" /><label for="j_idt8:url:0"> 10.125.112.20:10601</label></td>
</tr>
</table></td>
</tr>
<tr>
<td><label for="j_idt8:userName" class="output_label">
User name:</label></td>
<td><input id="j_idt8:userName" name="j_idt8:userName" type="text" value="" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" /><script id="j_idt8:userName_s" type="text/javascript">PrimeFaces.cw('InputText','widget_j_idt8_userName',{id:'j_idt8:userName'});</script></td>
</tr>
<tr>
<td><label for="j_idt8:password" class="output_label">
Password</label></td>
<td><input id="j_idt8:password" type="password" name="j_idt8:password" value="" /></td>
</tr>
<tr>
<td><label for="j_idt8:packageName" class="output_label">
Default package</label></td>
<td><input id="j_idt8:packageName" type="text" name="j_idt8:packageName" /></td>
</tr>
</tbody>
</table>
</div></div><script id="j_idt8:server_data_s" type="text/javascript">PrimeFaces.cw('Panel','widget_j_idt8_server_data',{id:'j_idt8:server_data'});</script><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="-494924954700381044:6977213687741547564" autocomplete="off" />
</form>
</center></body>
</html>
最佳答案
我建议检查一下div元素中的内部form是否正常。
看一下两个小提琴：第一个被从先前的答案中偷走了，并做了一些修改，我希望Aquillo不在乎=）。
http://jsfiddle.net/skip405/m6k3b/3/-在这里我们可能会看到背景颜色未应用到表单（我猜是相同的情况）。请注意div是浮动的-这意味着它已从常规流中删除。
http://jsfiddle.net/skip405/m6k3b/2/-在这里，我为父元素添加了一个简单的修复程序（如果知道的话，您可以选择其他方法）以便说出它是子元素并防止其崩溃。
您可以在此处阅读有关normal flow的信息。
希望对您有帮助。
关于html - 更改JSF表单的背景颜色，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16830192/