2013-05-30 146 views
0

我有一个JSF页面,其上有一个表单。我几乎可以修改此表格的所有属性,但不能修改背景颜色。到目前为止,我已经从CSS尝试过这样的:更改JSF表单的背景颜色

.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&amp;v=3.0" /><script type="text/javascript" src="/Jenny/faces/javax.faces.resource/jquery/jquery.js?ln=primefaces&amp;v=3.0"></script><script type="text/javascript" src="/Jenny/faces/javax.faces.resource/primefaces.js?ln=primefaces&amp;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> 
+0

只是一个说明。这与JSF或Primefaces无关。这只是一个CSS/HTML问题。所以你应该相应地标记你的问题。 – chkal

+0

有点愚蠢的我要注意,但你确定你将你的风格应用到正确的选择器? ))在你的问题中,你需要关于样式化一个具有'login_form'类的'form'元素 - 然后 - 你给你的css部分选择器是'login_panel')) – skip405

回答

0

我可以告诉检查您在form元素有内div是在正常流动。

看看两个小提琴:第一个从前面的答案被盗了,并修改了一下,我希望Aquillo不介意=)。

http://jsfiddle.net/skip405/m6k3b/3/ - 这里我们可能会看到背景颜色不适用于表单(您假设的情况相同)。请注意,div已浮动 - 这意味着它将从正常流程中移除。

http://jsfiddle.net/skip405/m6k3b/2/ - 在这里我添加了一个简单的解决(你可以选择其他的,如果你知道他们)的父元素,以使对说看到这是儿童和防止它倒塌。

您可以在这里阅读有关normal flow的文章。

希望能帮到你。