CSS를 사용하여 빈 입력 상자 일치
빈 입력 상자에 스타일을 적용하려면 어떻게 해야 합니까?사용자가 입력 필드에 무언가를 입력하는 경우 스타일은 더 이상 적용되지 않아야 합니다.이것이 CSS에서 가능합니까?시도해 봤습니다.
input[value=""]
최신 브라우저에서는 빈 입력을 대상으로 지정하는 데 사용할 수 있습니다(와 혼동하지 마십시오).
input:placeholder-shown {
border: 1px solid red; /* Red border only if the input is empty */
}
HTML에서 자리 표시자 속성을 설정해야 합니다.Chrome 브라우저에는 값으로 공백 문자 이상이 필요합니다.
<input type="text" placeholder=" "> <!-- Do not remove placeholder -->
필드가 다음과 같은 경우에만required당신은 할 수 있습니다.input:valid
#foo-thing:valid + .msg { visibility: visible!important; } <input type="text" id="foo-thing" required="required">
<span class="msg" style="visibility: hidden;">Yay not empty</span>또는 다음을 사용하여 부정합니다.#foo-thing:invalid(@SamGoody에 대한 공로)
input[value=""], input:not([value])
사용:
<input type="text" />
<input type="text" value="" />
그러나 다른 사용자가 입력을 시작하는 즉시 스타일이 변경되지 않습니다(그러려면 JS가 필요합니다).
필드 값을 업데이트해도 DOM의 값 속성은 업데이트되지 않으므로 실제로 필드가 비어 있지 않은 경우에도 선택기가 항상 필드와 일치합니다.
대신 다음과 같이 유사 클래스를 사용하여 원하는 것을 달성합니다.
input:required {
border: 1px solid green;
}
input:required:invalid {
border: 1px solid red;
}<input required type="text" value="">
<input required type="text" value="Value">기존 브라우저를 지원할 필요가 없는 경우 다음과 같은 조합을 사용할 수 있습니다.required,valid,그리고.invalid.
이것을 사용하는 것의 좋은 점은valid그리고.invalid유사 변수는 입력 필드의 유형 속성과 잘 작동합니다.예:
input:invalid, textarea:invalid {
box-shadow: 0 0 5px #d45252;
border-color: #b03535
}
input:valid, textarea:valid {
box-shadow: 0 0 5px #5cd053;
border-color: #28921f;
}<input type="email" name="email" placeholder="john_doe@example.com" required />
<input type="url" name="website" placeholder="http://johndoe.com"/>
<input type="text" name="name" placeholder="John Doe" required/>참고로, JSFidle 여기: http://jsfiddle.net/0sf6m46j/
저는 이것이 매우 오래된 방식이라는 것을 알고 있지만, 그 이후로 상황이 약간 바뀌었고 문제를 해결하는 데 필요한 올바른 조합을 찾는 데 도움이 되었습니다.그래서 저는 제가 한 일을 공유하려고 했습니다.
문제는 만약 그것이 채워졌다면, 내가 채워졌다면, 나는 같은 CSS를 선택적 입력에 적용해야 한다는 것이었습니다.css는 psuedo class:valid를 사용하여 css를 채우지 않을 때도 선택적 입력에 적용했습니다.
이렇게 고쳤습니다.
HTML
<input type="text" required="required">
<input type="text" placeholder="">
CSS
input:required:valid {
....
}
input:optional::not(:placeholder-shown){
....
}
이것은 저에게 효과가 있었습니다.
HTML의 경우 다음을 추가합니다.required입력 요소의 속성
<input class="my-input-element" type="text" placeholder="" required />
CSS의 경우,:invalid빈 입력을 대상으로 하는 선택기
input.my-input-element:invalid {
}
주의:
$('input#edit-keys-1').blur(function(){
tmpval = $(this).val();
if(tmpval == '') {
$(this).addClass('empty');
$(this).removeClass('not-empty');
} else {
$(this).addClass('not-empty');
$(this).removeClass('empty');
}
});
jQuery에서.저는 css로 수업을 추가하고 스타일링을 했습니다.
.empty { background:none; }
입력에 클래스 이름을 추가한 다음 CSS 규칙을 적용하는 것이 효과적이었습니다.
<input type="text" name="product" class="product" />
<style>
input[value=""].product {
display: none;
}
</style>
이 질문은 얼마 전에 던졌을 수도 있지만, 최근에 이 주제에 착수하면서 클라이언트 측 양식 유효성 검사를 찾고 있습니다.:placeholder-shown 지원이 점점 좋아지고 있어요, 저는 다음이 다른 사람들에게 도움이 될 것이라고 생각했습니다.
이 CSS4 유사 클래스를 사용하는 Berend 아이디어를 사용하여 사용자가 작성을 완료한 후에만 트리거되는 양식 유효성 검사를 만들 수 있었습니다.
다음은 CodePen에 대한 데모 및 설명입니다. https://codepen.io/johanmouchet/pen/PKNxKQ
또는 Edge를 IE를 할 수 수 ).:placeholder-shown이 하려면 실제로 있지 않은 합니다.Chrome 및 Safari의 경우 공백이 있더라도 이 작업을 수행하려면 실제로 비어 있지 않은 자리 표시자가 필요합니다.
*,
::after,
::before {
box-sizing: border-box;
}
label.floating-label {
display: block;
position: relative;
height: 2.2em;
margin-bottom: 1em;
}
label.floating-label input {
font-size: 1em;
height: 2.2em;
padding-top: 0.7em;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
label.floating-label input:focus {
color: #495057;
background-color: #fff;
border-color: #80bdff;
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
label.floating-label input+span {
position: absolute;
top: 0em;
left: 0;
display: block;
width: 100%;
font-size: 0.66em;
line-height: 1.5;
color: #495057;
border: 1px solid transparent;
border-radius: 0.25rem;
transition: font-size 0.1s ease-in-out, top 0.1s ease-in-out;
}
label.floating-label input:placeholder-shown {
padding-top: 0;
font-size: 1em;
}
label.floating-label input:placeholder-shown+span {
top: 0.3em;
font-size: 1em;
}<fieldset>
<legend>
Floating labels example (no-JS)
</legend>
<label class="floating-label">
<input type="text" placeholder=" ">
<span>Username</span>
</label>
<label class="floating-label">
<input type="Password" placeholder=" ">
<span>Password</span>
</label>
</fieldset>
<p>
Inspired by Bootstrap's <a href="https://getbootstrap.com/docs/4.0/examples/floating-labels/">floating labels</a>.
</p>그래서 저는 이전에 새로운 :where 및 :is 절을 가지고 놀다가 이 약간의 재미를 생각해 냈습니다. 그리고 :invalid 및 :placeholder-showbits가 있는 이 게시물을 찾은 후에, 이 가능성을 나중에 참조할 수 있도록 공유할 수 있다고 생각했습니다.
:required:where( input, textarea ):where( :placeholder-shown, :invalid ) {
border-color: var(--warning);
}
는 적니다됩용은을 입니다.:root { --warning: orange; }필요한 입력 또는 텍스트 영역의 색상이 비어 있거나 올바르지 않습니다.그리고 그것은 정말 섹시합니다.
현재 브라우저(2021-10-01)가 이를 지원하지 않지만, 다음을 위한 제안이 있습니다.:blank유사 계급의
참조: https://developer.mozilla.org/en-US/docs/Web/CSS/ : blank.참고로 이것은 실험 버전이며 현재로서는 지원하는 브라우저가 없습니다.
이것이 당신이 그것을 가능하게 할 수 있는 방법입니다.설정하는 것을 잊지 마십시오.placeholder=" "그리고.required 수 원하는 대로 소품을 바꿀 수 있습니다.
body{
display: flex;
justify-content: center;
align-items: center;
}
.input-gp {
margin-top: 150px;
position: relative;
}
.input-gp input {
position: relative;
}
.input-gp label{
position: absolute;
left: 5px;
bottom: 5px;
transition: all .4s ease;
}
.input-gp input:placeholder-shown + label{
left: 10px;
bottom: 5px;
}
.input-gp input:focus + label,
.input-gp input + label{
bottom: 30px;
left: 10px;
}<body>
<div class="input-gp ">
<input type="email" name="" id="email" placeholder=" " required>
<label class=" position-absolute" for="email"> Email</label>
</div>
</body>답변을 통해 빈 입력 상자를 얻을 수 있는 분명한 속성이 있는지 궁금합니다. 이 코드를 보십시오.
/*empty input*/
input:empty{
border-color: red;
}
/*input with value*/
input:not(:empty){
border-color: black;
}
갱신하다
input, select, textarea {
border-color: @green;
&:empty {
border-color: @red;
}
}
또한 검증 과정을 잘 살펴봅니다.
input, select, textarea {
&[aria-invalid="true"] {
border-color: amber !important;
}
&[aria-invalid="false"], &.valid {
border-color: green !important;
}
}
언급URL : https://stackoverflow.com/questions/3617020/matching-an-empty-input-box-using-css
'codememo' 카테고리의 다른 글
| 명령줄에서 Powershell ISE에서 ps1 스크립트를 열려면 어떻게 해야 합니까? (0) | 2023.08.31 |
|---|---|
| Mac High Sierra가 호스트 'localhost'를 사용하여 MariaDB에 연결할 수 없음 (0) | 2023.08.31 |
| APK 파일이 디스크에 없습니다. (0) | 2023.08.26 |
| 뷰의 절대 위치 설정 (0) | 2023.08.26 |
| VBA가 자동으로 변경됩니다.범위는 .range입니다. (0) | 2023.08.26 |