web-dev-qa-db-ja.com

デフォルトの入力スタイルの境界線の色

ここに難しい質問があります...

デフォルトのスタイル設定された入力フィールド（CSSは追加されず、幅/高さ/パディングのみ）がありますが、ここで赤い境界線（エラースタイル）を指定します。これどうやってするの？境界線を設定するだけで入力のデフォルトスタイルが削除され、境界線色のみを設定すると奇妙に見え、アウトラインを設定すると機能する場合があります（Firefoxではあまり見栄えがよくありません）。

任意のヒント？

編集：答える前に質問を読んでください。 入力のブラウザのデフォルトの外観が必要です、赤い境界線を付けたいだけです。

cssinputborder
23
tbleckert

私はこれはすでに答えられていると思っていただろう-確かにあなたが望むのはこれです：box-shadow：0 0 3px＃CC0000;

例： http://jsfiddle.net/vmzLW/

20
mattbee

AddClass（）メソッドを利用して、これにjqueryを使用できます。

CSS

 .defaultInput
    {
     width: 100px;
     height:25px;
     padding: 5px;
    }

.error
{
 border:1px solid red;
}

<input type="text" class="defaultInput"/>

Jqueryコード

$(document).ready({
  $('.defaultInput').focus(function(){
       $(this).addClass('error');
  });
});

更新：を使用してそのエラークラスを削除できます

$('.defaultInput').removeClass('error');

デフォルトのスタイルは削除されません。 .errorクラスのみを削除します

15
KillerFish

実際に何が間違っているのですか：

input { border: 1px solid #f00; }

エラーのある入力でのみ必要ですか？その場合、入力にエラーのクラスを与えます...

input.error { border: 1px solid #f00; }
5
Ian Wood

Angular applicationの場合、単純にこれを行うことができます

input.ng-invalid.ng-touched
{
    border: 1px solid red !important; 
}
4
Dilshan Liyanage

あなたの質問を正しく理解していれば、これで解決するはずです：

http://jsfiddle.net/wvk2mnsf/

HTML-シンプルな入力フィールドを作成します。

<input type="text" id="giraffe" />

CSS-独自のアウトラインをクリアして、独自のアウトラインを設定できるようにし、青みがかった赤のアウトラインで変に見えないようにします。

input:focus {
    outline: none;
}
.error-input-border {
    border: 1px solid #FF0000;
}

JS-CSSで宣言されたフィールドセットの赤い境界線クラスを入力すると

document.getElementById('giraffe').oninput = function() { this.classList.add('error-input-border'); }

これには、最新の標準に関する多くの情報もあります。 https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Data_form_validation

2
Christopher Grigg

border-color：透明;境界線：1pxの赤一色;

0
Alexandre Vieira