CSS를 사용하여 '필수 필드'별표를 자동으로 추가하여 입력 구성

이 코드가 원하는대로 작동하지 않는다는 불행한 사실을 극복하는 좋은 방법은 무엇입니까?

<div class="required">
    <label>Name:</label>
    <input type="text">
</div>

<style>
    .required input:after { content:"*"; }
</style>

완벽한 세계에서, 모든 필수 input는 필드가 필요하다는 것을 나타내는 작은 별표를 얻을 것입니다. CSS는 요소 자체 다음이 아닌 요소 내용 뒤에 삽입되므로 불가능합니다. 필수 필드 수천 개의 사이트에, 나는 (한 줄에 하나의 변화에 입력 앞에 별표를 이동할 수 :after로 :before) 아니면 라벨 (의 끝 부분으로 이동할 수 .required label:after라벨의 앞에, 또는에) 또는 보관함의 위치 등

별표를 어디에 두어야하는지에 대한 생각이 바뀌었을 때뿐만 아니라 양식 레이아웃이 별표를 표준 위치로 허용하지 않는 이상한 경우에도 중요합니다. 또한 양식을 확인하거나 잘못 완료된 컨트롤을 강조 표시하는 유효성 검사와도 잘 어울립니다.

마지막으로 추가 마크 업을 추가하지 않습니다.

불가능한 코드의 장점을 전부 또는 대부분 가진 좋은 솔루션이 있습니까?

그게 당신이 생각한 것입니까?

http://jsfiddle.net/erqrN/1/

<label class="required">Name:</label>
<input type="text">

<style>
  .required:after {
    content:" *";
    color: red;
  }
</style>

.required:after {
  content:" *";
  color: red;
}

<label class="required">Name:</label>
<input type="text">

https://developer.mozilla.org/en-US/docs/Web/CSS/pseudo-elements를 참조 하십시오.

.required label {
    font-weight: bold;
}
.required label:after {
    color: #e32;
    content: ' *';
    display:inline;
}

정확한 구조의 바이올린 : http://jsfiddle.net/bQ859/

이 허용 대답이지만, 제발 저를 무시하고 사용 :after아래 제안 구문을. 내 솔루션에 액세스 할 수 없습니다.

별표 그림의 배경 이미지를 사용하고 레이블 / 입력 / 외부 div의 배경과 별표 이미지 크기의 패딩을 설정하여 유사한 결과를 얻을 수 있습니다. 이 같은:

.required input {
   padding-right: 25px;
   background-image: url(...);
   background-position: right top;
}

이렇게하면 별표가 텍스트 상자 안에 표시되지만 div.required대신 .required input우아하게 표시하는 것이 조금 덜 우아하다면 찾고있는 것입니다.

이 방법에는 추가 입력이 필요하지 않습니다.

다음 이미지에 표시된대로 입력을 정확하게 입력하십시오.

나는 다음과 같은 접근법을 발견했다.

.asterisk_input::after {
content:" *"; 
color: #e32;
position: absolute; 
margin: 0px 0px 0px -20px; 
font-size: xx-large; 
padding: 0 5px 0 0; }

 <form>
    <div>              
        <input type="text" size="15" />                                 
        <span class="asterisk_input">  </span>            
    </div>            
</form> 

내가 일하는 사이트는 고정 레이아웃을 사용하여 코딩되었으므로 괜찮습니다.

액체 디자인에 좋은지 확실하지 않습니다.

CSS로 작성

.form-group.required .control-label:after {content:"*";color:red;}

그리고 HTML

<div class="form-group required">

    <label class="control-label">Name:</label>

    <input type="text">

</div>

input[required]{
    background-image: radial-gradient(#F00 15%, transparent 16%), radial-gradient(#F00 15%, transparent 16%);
    background-size: 1em 1em;
    background-position: right top;
    background-repeat: no-repeat;
}

input[required], select[required] {
    background-image: url('/img/star.png');
    background-repeat: no-repeat;
    background-position-x: right;
}

선택 드롭 다운 화살표와 겹치지 않도록 오른쪽에 20px의 공간이 이미지에 있습니다.

그리고 다음과 같이 보입니다 :

jQuery와 CSS 사용

jQuery(document).ready(function() {
 jQuery("[required]").after("<span class='required'>*</span>");
});

.required {
    position: absolute;
    margin-left: -10px;
    color: #FB0000;
    font-size: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="xxx" required>

나는 이것이 효과적인 방법이라고 생각합니다. 왜 두통이 그렇게 많은가요?

    <div class="full-row">
     <label for="email-id">Email Address<span style="color:red">*</span></label>
  <input type="email" id="email-id" name="email-id"  ng-model="user.email" >
    </div> 

2019 년 이며이 문제에 대한 이전 답변은 사용하지 않습니다

1. CSS 그리드
2. CSS 변수
3. HTML5 양식 요소
4. CSS의 SVG

CSS 그리드는 추가 div, 범위, 별표가있는 범위 및 기타 유물없이 입력보다 레이블을 입력 할 수 있으므로 2019 년에 양식을 작성하는 방법입니다.

최소한의 CSS를 사용하는 곳은 다음과 같습니다.

위의 HTML :

<form action="https://www.example.com/register/" method="post" id="form-validate" enctype="multipart/form-data">
    <p class="form-instructions">Please enter the following information to create your account.</p>
    <label for="firstname">First name</label>
    <input type="text" id="firstname" name="firstname" value="" title="First name" maxlength="255" required="">
    <label for="lastname">Last name</label>
    <input type="text" id="lastname" name="lastname" value="" title="Last name" maxlength="255" required="">
    <label for="email_address">Email address</label>
    <input type="email" autocapitalize="off" autocorrect="off" spellcheck="false" name="email" id="email_address" value="" title="Email address" size="30" required="">
    <label for="password">Password</label>
    <input type="password" name="password" id="password" title="Password" required="">
    <label for="confirmation">Confirm password</label>
    <input type="password" name="confirmation" title="Confirm password" id="confirmation" required="">
    <input type="checkbox" name="is_subscribed" title="Subscribe to our newsletter" value="1" id="is_subscribed" class="checkbox">
    <label for="is_subscribed">Subscribe to the newsletter</label>
    <input type="checkbox" name="persistent_remember_me" id="remember_meGCJiRe0GbJ" checked="checked" title="Remember me">
    <label for="remember_meGCJiRe0GbJ">Remember me</label>
    <p class="required">* Required</p>
    <button type="submit" title="Register">Register</button>
</form>

자리 표시 자 텍스트도 추가 할 수 있으므로 적극 권장됩니다. (나는 단지이 중간 형태에 대답하고있다).

CSS 변수의 경우 :

--icon-required: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="-10 -6 16 16"> \
  <line id="line" y1="-3" y2="3" stroke="%23df0000" stroke-linecap="butt" transform="rotate(15)"></line> \
  <line id="line" y1="-3" y2="3" stroke="%23df0000" stroke-linecap="butt" transform="rotate(75)"></line> \
  <line id="line" y1="-3" y2="3" stroke="%23df0000" stroke-linecap="butt" transform="rotate(-45)"></line> \
</svg>');

--icon-tick: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="-2 -2 16 16"> \
            <path fill="green" stroke-linejoin="round" d="M2 6L1 7l3 4 7-10h-1L4 8z"/> \
</svg>');

양식 요소의 CSS :

input[type=text][required],
input[type=email][required],
input[type=password][required],
input[type=tel][required] {
    background-image: var(--icon-required);
    background-position-x: right;
    background-repeat: no-repeat;
    background-size: contain;
}

input:valid {
    --icon-required: var(--icon-tick);
}

양식 자체는 CSS 그리드에 있어야합니다.

form {
    align-items: center;
    display: grid;
    grid-gap: var(--form-grid-gap);
    grid-template-columns: var(--form-grid-template-columns);
    margin: auto;
}

열의 값은 1 / -1 범위로 설정된 양식의 태그 와 같은 것으로 설정 1fr auto하거나 설정할 수 있습니다 . 미디어 쿼리에서 변수를 변경하여 입력 상자가 모바일에서 또는 데스크톱에서 위와 같이 전체 너비가되도록합니다. CSS 변수 접근 방식을 사용하여 원하는 경우 모바일에서 그리드 간격을 변경할 수도 있습니다.1fr<p>

상자가 유효하면 별표 대신 녹색 체크 표시가 나타납니다.

CSS의 SVG는 별표의 이미지를 얻기 위해 브라우저가 서버를 왕복하지 않아도되는 방법입니다. 이런 식으로 별표를 미세 조정할 수 있습니다. 여기 예제는 특이한 각도에 있습니다. 위의 SVG 아이콘을 완전히 읽을 수 있으므로 편집 할 수 있습니다. 별표를 중앙 위 또는 아래에 배치하도록 뷰 박스를 수정할 수도 있습니다.

이 예에서는 레이블 앞에 별표 기호를 붙여 특정 입력을 필수 필드로 나타냅니다. 내 웹 페이지가 반응 할 수 있도록 %와 em을 사용하여 CSS 속성을 설정했습니다. 원하는 경우 px 또는 다른 절대 단위를 사용할 수 있습니다.

#name {
   display: inline-block;
   margin-left: 40%;
   font-size:25px;
    
}
.nameinput{
   margin-left: 10px;
   font-size:90%;
   width: 17em;
   
}

.nameinput::placeholder {
  font-size: 0.7em;
  vertical-align: middle;
}

#name p{
   margin:0;
   border:0;
   padding:0;
   display:inline-block;
   font-size: 40%;
   vertical-align: super;
}

<label id="name" value="name">
<p>*</p> 
Name:  <input class="nameinput" type="text" placeholder="Enter your name" required>
</label>

필요한 것은 : required selector- '필수'속성을 가진 모든 필드를 선택하므로 클래스를 추가 할 필요가 없습니다. 그런 다음 필요에 따라 스타일을 입력하십시오. ': after'선택기를 사용하고 다른 답변 중에서 제안 된 방식으로 별표를 추가 할 수 있습니다

"필수"클래스와 "form-group"클래스가 포함 된 div 태그에 HTML 코드를 캡슐화하여 원하는 결과를 얻을 수 있습니다.하지만 부트 스트랩이있는 경우에만 작동합니다.

<div class="form-group required">
    <div class="required">
        <label>Name:</label>
        <input type="text">
    </div>
  <div>

여기에 있지만 jQuery가있는 사람들을 위해 :

// javascript / jQuery
$("label.required").append('<span class="red-star"> *</span>')

// css
.red-star { color: red; }