16

一部のラジオボタンの周りに派手な赤い境界線を表示しようとしていますが、Firefox最新またはChrome最新では表示されません。IE9/IE8で正常に動作します。

必須のフォームの各入力要素には、MVC3によって入力されたdata-val-required属性があります。すべてのブラウザは、テキストまたはテキストエリアの入力がある場合、赤い境界線を表示しますが、ラジオボタンで苦労しています。IEの場合は機能しますが、他のブラウザではその周りに赤い境界線は表示されません。

css：

input[data-val-required], select[data-val-required], textarea[data-val-required]
{
    background-color: #F0FFFF;
    border: 1px solid red;
}

ビューソース：

<label for="WaiveSelect">Do you waive confidentiality?</label><br />
<input data-val="true" data-val-number="The field WaiveSelect must be a number." data-val-required="Please select waive." id="WaiveSelect" name="WaiveSelect" type="radio" value="0" /> No, I do not waive confidentiality<br />
<input id="WaiveSelect_2" name="WaiveSelect" type="radio" value="2" /> Yes, I waive confidentiality<br />
<input id="WaiveSelect_3" name="WaiveSelect" type="radio" value="3" /> Yes, I waive confidentiality except to the client<br />
<span class="field-validation-valid" data-valmsg-for="WaiveSelect" data-valmsg-replace="true"></span>

IEでの外観（FirefoxとChromeには境界線が表示されません）： ここに画像の説明を入力してください

4

7 に答える 7

56 
input[type=radio]{
    outline: 1px solid red
}
于 2013-01-17T21:13:21.707 に答える
10

これは4年前のことですが、CSSPseudo要素を使用した優れたソリューションを思いつきました。

私の要件は、検証でチェックされていないチェックボックスまたはラジオボタンを強調表示することでした。

<input type="radio" class="required" name="radio1"/>

/* Radio button and Checkbox .required needs an after to show */
input[type=radio].required::after, input[type=checkbox].required::after {
    display: block;
    width: 100%;
    height: 100%;
    background: transparent;
    content: '';
    border: 2px solid red !important;
    box-sizing: border-box;
}
/* Radio buttons are round, so add 100% border radius. */
input[type=radio].required::after {
     border-radius:100%;
}
于 2017-05-05T10:39:30.593 に答える
7

各入力要素をdivタグでラップし、境界線とフロートを左に指定することで実現できます...次のようになります。

<div style="border:1px solid red;float:left">
   <input type="radio".. />
</div>
No, I do not waive confidentiality
于 2012-06-01T11:55:12.727 に答える
2

すべてのブラウザがラジオボタンとチェックボックスの周囲の境界線をサポートしているわけではありません。私は何年も前にこれをGeckoに含めるためにバグに投票しましたが、今のところ彼らはそれを実装していません。

于 2012-06-01T11:50:25.287 に答える
2

これはあなたを助けるかもしれません：

.style {
  border: 1px solid red;
  width: 20px;
  height: 20px;
  text-align: center;
  margin-top: 2px;
  background-color: #f0ffff;
}
<div class="style">
  <input type="radio" />
</div>
<div class="style">
  <input type="radio" />
</div>
<div class="style">
  <input type="radio" />
</div>
<div class="style">
  <input type="radio" />
</div>

JSFiddleで表示

于 2012-06-01T12:29:44.203 に答える
0

jqueryを使用した完全なコード

https://jsfiddle.net/xcb26Lzx/

$(function(){
      $('.layer').css('border',0);
    $('input:radio').change(
    function(){
        if ($(this).is(':checked')) {
            $('.layer').css('border','1px solid red');
        }
    });
});
于 2015-04-04T07:06:14.623 に答える
0

これを試して...

入力の周りにdivを配置し、次のようにdivにクラスを割り当てます。

<div class="custom"><input type="radio"></div>

次に、カスタムcssファイルを開き、このCSSを追加します

.custom {border: 1px solid red; border-radius: 30px; padding: 3px 3px 0 3px; background: red;}

これにより、ラジオボタンの周りに素敵な赤い境界線が作成されます。チェックボックスを使用している場合は、cssからborder-radius：30pxを削除するだけです。場合によっては、ボタンを中央に配置するためにパディングを少し操作する必要があるかもしれませんが、これは私にとってはうまくいきました。

編集：正しく整列するように、次のCSSをdivに割り当てることもできます。

.custom {display: inline;}

フィドルリンク

于 2016-07-15T00:28:50.767 に答える