1

我有h:selectOneRadio如下：

<div id="container" class="container">
<h:selectOneRadio layout="pageDirection" id="sel_radio" value="#{mBean.selectedRadio}">  
   <f:selectItem id="option1" itemLabel="item1" itemValue="1" />  
   <f:selectItem id="option2" itemLabel="item2" itemValue="2" />            
</h:selectOneRadio>
.
.
.
</div>

以上将呈现如下：

<div id="container" class="container">
<table>
  <tbody>
    <tr>
      <td>
        <input type="radio" name="myForm:sel_radio" id="myForm:sel_radio:0" value="1">

问题：容器类为所有输入提供默认宽度，这将影响我的单选按钮，这是 css 类：

.container input {
width: 200px;
}

而且我无法更改此类，因为它是模板并用于其他页面，我只想在此页面中覆盖此样式。

我试图通过添加以下样式来覆盖它：

.container #myForm:sel_radio:0 {
  width: 50px !important;
}

但它也不起作用。

请告知如何解决这个问题，谢谢。

4

3 回答 3

4

您最好指定元素类型，而不是元素 ID：

.container input[type=radio] {
    width: 50px !important;
}

或者，给它一个样式类，例如<h:selectOneRadio styleClass="myradio">，使用这个 CSS：

.container .myradio input {
    width: 50px !important;
}
于 2012-10-04T13:48:12.453 回答
2

我希望这有帮助

<input type="radio" name="myForm:sel_radio" id="myForm:sel_radio:0" value="1">

你必须像这样放反斜杠

.container  #myForm\:sel_radio\:0{
width:100px!important;
}
于 2012-10-04T09:25:28.190 回答
2

使用\3A(反斜杠的十六进制代码) 转义冒号，因为冒号是 CSS 中的特殊字符，或者您可以定义新样式：

 #myForm .container input { 
   width: 50px;
 }

直接用反斜杠转义冒号\在 IE6 中不起作用，我不确定是否也在 IE7 中。如果可能，还要避免使用!important 。如果你在一段时间后尝试改变你的风格并且你忘记了它，这可能会导致头痛。

于 2012-10-04T09:35:10.483 回答