Question

我有 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">

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

.container input {
width: 200px;
}

我无法更改此类，因为它是一个模板并在其他页面中使用，我想仅在此页面中覆盖此样式。

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

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

但它也不起作用。

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

Answer 1

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

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

或者，使用此CSS给它一个类似<h:selectOneRadio styleClass="myradio">的样式表：

.container .myradio input {
    width: 50px !important;
}

Answer 2

我希望这会有所帮助

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

你必须像这样使用反斜杠

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

Answer 3

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

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

直接使用反斜杠转义冒号\在IE6中不起作用，我不确定是否也在IE7中。如果可能，请避免使用！important 。如果你试图在一段时间后改变你的风格而你忘了它，它会引起头痛。

如何在h：selectOneRadio中更改单选按钮样式

3 个答案: