source

부트스트랩 3의 필수 필드에 별표 추가

manysource 2023. 10. 17. 20:23

부트스트랩 3의 필수 필드에 별표 추가

내 HTML에는 다음과 같은 클래스가 있습니다..required필수 필드에 할당됩니다.

HTML은 다음과 같습니다.

<form action="/accounts/register/" method="post" role="form" class="form-horizontal">
    <input type='hidden' name='csrfmiddlewaretoken' value='brGfMU16YyyG2QEcpLqhb3Zh8AvkYkJt' />
    <div class="form-group required">
       <label class="col-md-2 control-label">Username</label>
       <div class="col-md-4">
         <input class="form-control" id="id_username" maxlength="30" name="username" placeholder="Username" required="required" title="" type="text" />
       </div>
    </div>
    <div class="form-group required"><label class="col-md-2 control-label">E-mail</label><div class="col-md-4"><input class="form-control" id="id_email" name="email" placeholder="E-mail" required="required" title="" type="email" /></div></div>
    <div class="form-group required"><label class="col-md-2 control-label">Password</label><div class="col-md-4"><input class="form-control" id="id_password1" name="password1" placeholder="Password" required="required" title="" type="password" /></div></div>
    <div class="form-group required"><label class="col-md-2 control-label">Password (again)</label><div class="col-md-4"><input class="form-control" id="id_password2" name="password2" placeholder="Password (again)" required="required" title="" type="password" /></div></div>
    <div class="form-group required"><label class="col-md-2 control-label">first name</label><div class="col-md-4"><input class="form-control" id="id_first_name" maxlength="30" name="first_name" placeholder="first name" required="required" title="" type="text" /></div></div>
    <div class="form-group required"><label class="col-md-2 control-label">last name</label><div class="col-md-4"><input class="form-control" id="id_last_name" maxlength="30" name="last_name" placeholder="last name" required="required" title="" type="text" /></div></div>
    <div class="form-group required"><label class="col-md-2 control-label">&#160;</label><div class="col-md-4"><div class="checkbox"><label><input class="" id="id_tos" name="tos" required="required" type="checkbox" /> I have read and agree to the Terms of Service</label></div></div></div>

    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
           <button type="submit" class="btn btn-primary">
              <span class="glyphicon glyphicon-star"></span> Sign Me Up!
           </button>
        </div>
    </div>
</form>

저는 CSS에 다음을 추가했습니다.

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

그것은 여전히 위험을 주지 않습니다.*필요한 분야를 중심으로내가 뭘 놓치고 있는 거지?부트스트랩 3에서 직접 소개할 수 있는 방법은 없나요?*필요한 분야로?

편집

그*약관은 확인란에 바로 나타나지 않습니다.어떻게 고쳐야 합니까?

enter image description here

사용하다.form-group.required여지없이

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

편집:

확인란에는 의사 클래스 :not()을 사용할 수 있습니다.확인란이 아닌 경우 각 레이블 뒤에 필요한 *를 추가합니다.

.form-group.required:not(.checkbox) .control-label:after, 
.form-group.required .text:after { /* change .text in whatever class of the text after the checkbox has */
   content:"*";
   color:red;
}

참고: 테스트되지 않음

.text 클래스를 사용하거나 대상을 지정해야 할 가능성이 있습니다. html을 사용해 보십시오.

<div class="form-group required">
   <label class="col-md-2 control-label">&#160;</label>
   <div class="col-md-4">
      <div class="checkbox">
         <label class='text'> <!-- use this class -->
            <input class="" id="id_tos" name="tos" required="required" type="checkbox" /> I have read and agree to the Terms of Service
         </label>
      </div>
   </div>
</div>

Ok 세번째 편집:

CSS는 원래대로 돌아갑니다.

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

HTML:

<div class="form-group required">
   <label class="col-md-2">&#160;</label> <!-- remove class control-label -->
   <div class="col-md-4">
      <div class="checkbox">
         <label class='control-label'> <!-- use this class as the red * will be after control-label -->
            <input class="" id="id_tos" name="tos" required="required" type="checkbox" /> I have read and agree to the Terms of Service
         </label>
      </div>
   </div>
</div>

이것이 HTML의 모습이라고 가정할 때

<div class="form-group required">
   <label class="col-md-2 control-label">E-mail</label>
   <div class="col-md-4"><input class="form-control" id="id_email" name="email" placeholder="E-mail" required="required" title="" type="email" /></div>
</div>

레이블 오른쪽에 별표를 표시하려면:

.form-group.required .control-label:after { 
    color: #d00;
    content: "*";
    position: absolute;
    margin-left: 8px;
    top:7px;
}

또는 레이블 왼쪽에:

.form-group.required .control-label:before{
   color: red;
   content: "*";
   position: absolute;
   margin-left: -15px;
}

커다란 빨간색 별표를 만들려면 다음 줄을 추가할 수 있습니다.

font-family: 'Glyphicons Halflings';
font-weight: normal;
font-size: 14px;

또는 Font Awesome을 사용하는 경우 다음 줄을 추가하고 내용 줄을 변경합니다.

font-family: 'FontAwesome';
font-weight: normal;
font-size: 14px;
content: "\f069";

.form-group .required .control-label:after아마 그럴 것입니다..form-group.required .control-label:after. 변경 사항은 .form-group과 .form-group 사이의 공백을 제거하는 것입니다.

간단한 CSS를 사용합니다.

.myform .required:after {
  content: " *";
    color: red;
    font-weight: 100;
}
 <form class="myform">
    <div class="col-md-12">
      <label for="xxx_fname" class="form-label required">First Name</label>
      <input type="text" class="form-control" id="xxx_fname" >
   </div>
    <div class="col-md-12">
      <label for="xxx_lname" class="form-label required">Last Name</label>
      <input type="text" class="form-control" id="xxx_lname" >
   </div>
</form

나머지 두 개의 답은 맞습니다.CSS 셀렉터에 공간을 포함할 경우 하위 요소를 대상으로 합니다.

.form-group .required {
    styles
}

"양식-그룹" 클래스를 가진 요소 내부에 있는 "필수" 클래스를 가진 요소를 대상으로 합니다.

공간이 없으면 두 클래스를 모두 가진 요소를 목표로 합니다.'required' 및 '폼 그룹'

이 CSS는 나에게 효과가 있었습니다.

.form-group.required.control-label:before{
   color: red;
   content: "*";
   position: absolute;
   margin-left: -10px;
}

그리고 이 HTML:

<div class="form-group required control-label">
  <label for="emailField">Email</label>
  <input type="email" class="form-control" id="emailField" placeholder="Type Your Email Address Here" />
</div>

이것은 저에게 효과가 있습니다.

CSS

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

오어

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

기본 HTML

<div class="form-group required control-label">
  <input class="form-control" />
</div>

부트스트랩 3.3.6을 사용하고 있어서 CSS를 수정했습니다.

.form-group.required label:after{   
color: #d00;   
font-family: 'FontAwesome'; 
font-weight: normal;
font-size: 10px;
content: "\f069"; 
top:4px;   
position: absolute;   
 margin-left: 8px;
}

HTML

<div class="form-group required">
 <label for="return_notes"><?= _lang('notes') ?></label>
 <textarea class="form-control" name="return_notes" id="return_notes"  required="required"></textarea>
</div>

다음과 같은 작업만 수행하면 됩니다.

CSS

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

HTML

<form>
  <div class="form-group required">
    <label class="control-label">Name</label>
    ...
  </div>
</form>

언급URL : https://stackoverflow.com/questions/23141854/adding-asterisk-to-required-fields-in-bootstrap-3

'source' 카테고리의 다른 글

원격 분기로 로컬 분기 덮어쓰기  (0) 2023.10.17
사람과 구별할 수 있는 랜덤 컬러 생성  (0) 2023.10.17
도커 구성, net:host에서 컨테이너 실행  (0) 2023.10.17
C에서 두 문자열을 비교하는 것?  (0) 2023.10.17
z-index가 position absolute에서 작동하지 않음  (0) 2023.10.17

'source'의 다른글

  • 현재글부트스트랩 3의 필수 필드에 별표 추가

관련글

댓글

티스토리툴바