입력란 안의 별표가 필요합니다.

Question

입력란 안쪽에 빨간색 별표를 넣을 수 있습니까? 별표를 넣을 수있는 공간이 부족합니다. 여기 내 입력에 대한 내 CSS입니다.

input { 
    padding: 15px; 
    border: 1px solid #ccc; 
    border-radius: 3px; 
    margin-bottom: 10px; 
    box-sizing: border-box; 
    font-family: montserrat; 
    color: #2C3E50; 
    font-size: 13px; 
} 

어떤 방법이 있을까요? 감사.

Answer 1

부트 스트랩을 사용하면 여러분이 말하는 것을 할 수있는 "input-group-addon"이라는 클래스가 있습니다. 부트 스트랩 (Bootstrap)을 사용하고 있지 않다면, 아마도 당신이 프로젝트를 위해 envision을하고있는 것처럼 보이면 그 클래스의 CSS를 빌릴 수 있습니다. 여기에 사용 된 예가 있습니다 : http://getbootstrap.com/css/#forms

Answer 2

입력 제어를 위해 이전 또는 이후를 사용할 수 없습니다. 최종 결과를 달성하기 위해 그래서 inorder를, 당신은 "*"

#wrapper { 
 
    position: relative; 
 
    display: inline-block; 
 
    z-index: 1; 
 
} 
 
#wrapper input { 
 
    padding-right: 14px; 
 
} 
 
#wrapper:after { 
 
    content: "*"; 
 
    position: absolute; 
 
    right: 5px; 
 
    top: +3px; 
 
    color: red; 
 
    z-index: 5; 
 
}

<div id="wrapper"> 
 
    <input type="text" /> 
 
</div>

Answer 3

위치를 사업부 (IT 인라인 블록을)와 함께 입력 컨트롤을 래핑과 CSS를 사용하여 "후"필요 당신이 Glyphicons과 함께 bootsrap3 사용하는 경우, 당신이 시도 할 수 있습니다 :

.requiredFieldWrapper::after 
 
{ 
 
    font-family: 'Glyphicons Halflings'; 
 
    content: '*'; 
 
    position: absolute; 
 
    top:2px; 
 
    bottom: 0; 
 
    right: 17px; 
 
    font-size: 10px; 
 
    color: red; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<br> 
 
<br> 
 
<div class="col-xs-10 requiredFieldWrapper"> 
 
<input class="form-control" type="text" autocomplete="off" required> 
 
</div>