7

HTML や CSS のみを使用して、ラジオ ボタン コントロールのサイズを変更したいと考えています。

画像を使わなくてもできますか？

4

5 に答える 5

32

ラジオボタンのサイズを変更する簡単な解決策の1つは、ラジオボタンを変換することです。

input[type='radio'] {
    transform: scale(2);
}

これにより、すべてのラジオボタンが2倍の大きさになります。いつものように、ブラウザのサポートを確認してください。

元の回答（2012年5月27日）

ラジオボタンのサイズは変更できません。通常、チェックボックス/ラジオボタンのUIアスペクトを置き換えるカスタムUI要素を設計します。それをクリックすると、下にあるチェックボックス/ラジオボタンがクリックされます。

ここで例を参照してください：http：//webdesign.maratz.com...radio-buttons/jquery.html

于 2012-05-17T05:40:49.210 に答える
3

実際には、クロスブラウザ方式ではありません。appearance:none;Firefox、Safari、およびChromeでは、 （ベンダープレフィックスを使用して）設定することでデフォルトのラジオボタンのスタイルを削除してから、好きなようにスタイルを設定できます。しかし、IEとOperaはまだこれをサポートしていません。

スタイル付きチェックボックスを実現する唯一の信頼できる方法は、JavaScriptを使用して別の要素をチェックボックスのように機能させることです。しかし、もちろん、JavaScriptが無効になっている人を台無しにしていることになります。結局、問題は十分に粘着性があるので、配置を除いてチェックボックスのスタイルを変更しないままにする傾向があります。

于 2012-05-17T05:42:34.997 に答える
1

ラジオ ボタンのスタイリングは、他のフォーム要素ほど簡単ではありませんが、CSS を使用して高さと幅を設定することで実現できますが、デザインはブラウザーによって異なります サイズのルック アンド フィールは変更できます。参照用にこのリンクを参照してください、 http://www.456bereastreet.com/lab/styling-form-controls-revisited/radio-button/

変更を明確にするために、JavaScript または UI 画像のいずれかを選択できます。

ありがとう ..

于 2012-05-17T05:43:33.500 に答える
-1

IE8 を気にしない場合は、次のことができます。

HTML:

<div class="cb_wrap">
  <input type="checkbox" />
  <div class="cb_dummy"></div>
</div>​

CSS:

.cb_wrap{
  position: relative            
}

input{
  opacity: 0;  
  position: relative;
  z-index: 10;
}

.cb_dummy{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;  
  width: 15px;
  height: 15px;
  background: #f00;    /* use some image */
}

input:checked + .cp_dummy{
  background: #0f0;   /* use some image */
}

デモ: http://jsfiddle.net/FKqj3/

于 2012-05-17T07:19:40.883 に答える