私はCSS初心者です。この問題を解決する方法がわかりません。入力が無効な場合は、左側に赤い枠線で入力をマークする必要があります。CSS - 検証 - 左の赤い枠線は、要素のオフセットを引き起こします。
私のCSSは次のようになります。
input.ng-invalid {
border-left-width: 10px;
border-left-color: red;
}
それは入力の幅に10pxのを追加しないと無効な入力が有効なものから大きいことを除いてそれが正常に動作します。
まったく同じ有効および無効な入力の両方に幅を維持する方法はありますか？私は、私が望むものを達成するために適切な財産を使用していないと信じています。
、あなたはすべての要素のサイズ計算がborders、paddingsとheightsとwidthsの値を含むことを意味し、border-boxの値に設定することによってCSS box-sizingプロパティを使用することができます。
input {
width: 200px;
box-sizing: border-box;
}
.invalid {
border-left-width: 10px;
border-left-color: red;
}<input type=text />
<br />
<br />
<input type=text class=invalid />PS：しかし、あなたはまた、以下の例のように、要素のwidth（またはheight）を修正する必要があります。 border-color: transparent音あなたは下のリンクをチェックしてくださいするために、私はスニペットを作っ
通常の要素には、デフォルトで境界線が表示されません。その場合、実際に要素の周りに境界線が導入されています。
次の操作が必要な場合があります。初期の提案を1として
<html>
<body>
<input value='Valid' /><br />
<input class='ng-invalid' value='InValid' />
</body>
</html>
<style>
input{ border-left-width: 10px; border-left-color: transparent; } /*now all borders has a left transparent border of 10*/
input.ng-invalid { border-left-width: 10px; border-left-color: red; }
</style>
ハックのようなビット： https://jsfiddle.net/fatehjagdeo/sx9g3yLs/
やコードの下にこれをチェック：
<html>
<head>
<title>demo</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<style>
.ng-invalid {
border-left-width: 10px;
border-left-color: red;
}
</style>
<script>
$(document).on('click','#submit',function(){
$('input').removeClass('ng-invalid');
var value=$('#name').val();
if(value==""){
$('#name').addClass('ng-invalid');
}
});
</script>
</head>
<body>
<input id="name" /><br />
<input type="button" value="submit" id="submit">
</body>
</html>
'ボックスサイジングを追加：ボーダー・ボックスを; 'inputのスタイルに変換する。 –
@MuhammadUsmanあなたは、まさに私が必要なものを揺する！ありがとう。 – Microcontroleur
あなたはようこそ） –