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

(バックスラッシュの 16 進コード) でコロンをエスケープします。\3Aこれは、コロンが CSS の特殊文字であるか、新しいスタイルを定義できるためです。

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

コロンをバックスラッシュで直接エスケープすること\は IE6 では機能せず、IE7 でも機能するかどうかはわかりません。また、可能であれば!importantの使用も避けてください。しばらくしてからスタイルを変更しようとして忘れてしまうと、頭痛の種になる可能性があります。

于 2012-10-04T09:35:10.483 に答える
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 に答える