부트 스트랩 양식 제어 및 양식 제어 사용자 선택 옵션 공백

dtauil

부트 스트랩으로 CRUD를 만들고 있습니다. 태그가있을 때 문제가 있습니다.

이 상황은 다음과 같습니다 : https://i.stack.imgur.com/M1WTB.png

코드 :

          <div class="form-group row">
           <div class="col-sm-6 mb-3 mb-sm-0">              
            <select class="form-control form-control-user" id="citizenship">
                <option value="" disabled selected>Select a Citizenship</option>
                <option value="AU_Citizen">AU Citizen</option>
                <option value="NZ_Citizen">NZ Citizen</option>
                <option value="Other">Other*</option> 
            </select>    
          </div>

선택 옵션을 클릭하면 내가 가지고있는 모든 옵션이 필드에 표시되지만 그중 하나를 선택하면 필드가 공백으로 유지됩니다. 그러나 form-control 또는 form-control-user 만 사용하면 작동하지만 스타일은 없습니다. 내 문제는 둘 다 함께 사용할 때입니다.

아래 이미지는 form-control 만 사용하고 있습니다 : https://i.stack.imgur.com/tqcrR.png

아래 이미지는 form-control-user 만 사용하고 있습니다 : https://i.stack.imgur.com/Kg9v1.png

Hiren

친애하는 @dtauil 나는 당신이 여분의 패딩을 주었을지도 모른다고 생각한다.-이 CSS를 각 클래스에 제공하십시오. 높이를 변경해야합니다. 패딩이 변경되지 않습니다. 코드 높이를 사용하여 변경했습니다 . calc (2.9em + .75rem + 2px); , 테두리 반경 : 50px;

/*Use this css code*/ 

   .form-control {
    display: block;
    width: 100%;
    height: calc(2.9em + .75rem + 2px);
    padding: 0.375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 50px;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

텍스트 사이의 공백 제거 및 옵션 선택

분류에서Dev

콤보 상자에서 선택한 옵션 검색 (양식 제어) Excel VBA

분류에서Dev

부트 스트랩-양식 제어의 진행률 표시 줄

분류에서Dev

양식 제출 후 일부 선택 옵션 유지

분류에서Dev

옵션 및 메서드를 사용할 때 부트 스트랩 날짜 선택기 복제

분류에서Dev

자바 스크립트 선택 onchange 제출 양식

분류에서Dev

Liferay 포틀릿 내에서 양식 제어 위치 지정 (부트 스트랩 또는 기타 사용)

분류에서Dev

AngularJS로 옵션 및 텍스트 입력 양식을 제출하는 방법

분류에서Dev

양식 입력에 대한 부트 스트랩 3 및 단순 양식 표시 문제

분류에서Dev

양식 그룹 및 Razor HTML 도우미 버튼 정렬 문제가있는 부트 스트랩 양식 수평

분류에서Dev

부트 스트랩 양식 버튼 및 구독 파라 플로팅 문제

분류에서Dev

부트 스트랩 탭 jquery에서 양식 ID를 사용하여 여러 양식 제출

분류에서Dev

부트 스트랩 팝 오버 내부에 양식 제어 입력 표시

분류에서Dev

$ _POST 데이터를 사용할 수없는 부트 스트랩 양식 제출

분류에서Dev

양식 선택, 제출 후 옵션 선택 유지

분류에서Dev

사용자 옵션 선택에 의한 양식 동작 변경 자바 스크립트

분류에서Dev

부트 스트랩을 사용하여 단어 수 및 영숫자 값에 대한 양식의 유효성을 검사하는 방법

분류에서Dev

백본 양식은 백본 컬렉션 및 선택 편집기에 대한 옵션을 사용합니다.

분류에서Dev

사용자가 선택한 옵션에 따라 JQuery를 사용하여 양식을 제출하는 방법

분류에서Dev

승리 양식의 경고 및 정보 공급자 제어

분류에서Dev

자식 클래스의 부모 선택 / 복제-부모 및 appendTo / insertAfter 결과 내의 다양한 속성에 텍스트 추가

분류에서Dev

부트 스트랩 선택에서 양식 제어와 같은 : focus & : valid 값을 얻는 방법은 무엇입니까?

분류에서Dev

Angular2 및 Html 양식-양방향 데이터 바인딩 공백, 필수, 선택 문제

분류에서Dev

html 및 php로 이전 양식 제어에서 값을 선택한 경우에만 양식 제어 표시

분류에서Dev

다양한 결제 옵션에 대한 고유 한 고급 설정을 사용하는 사용자 지정 스트라이프 체크 아웃 양식

분류에서Dev

새 부트 스트랩 탭에 양식 입력 복제

분류에서Dev

POST로 제출되지 않는 부트 스트랩 양식

분류에서Dev

부트 스트랩 모달 문의 양식 문제

분류에서Dev

내 양식을 제출하는 부트 스트랩 모달

Related 관련 기사

  1. 1

    텍스트 사이의 공백 제거 및 옵션 선택

  2. 2

    콤보 상자에서 선택한 옵션 검색 (양식 제어) Excel VBA

  3. 3

    부트 스트랩-양식 제어의 진행률 표시 줄

  4. 4

    양식 제출 후 일부 선택 옵션 유지

  5. 5

    옵션 및 메서드를 사용할 때 부트 스트랩 날짜 선택기 복제

  6. 6

    자바 스크립트 선택 onchange 제출 양식

  7. 7

    Liferay 포틀릿 내에서 양식 제어 위치 지정 (부트 스트랩 또는 기타 사용)

  8. 8

    AngularJS로 옵션 및 텍스트 입력 양식을 제출하는 방법

  9. 9

    양식 입력에 대한 부트 스트랩 3 및 단순 양식 표시 문제

  10. 10

    양식 그룹 및 Razor HTML 도우미 버튼 정렬 문제가있는 부트 스트랩 양식 수평

  11. 11

    부트 스트랩 양식 버튼 및 구독 파라 플로팅 문제

  12. 12

    부트 스트랩 탭 jquery에서 양식 ID를 사용하여 여러 양식 제출

  13. 13

    부트 스트랩 팝 오버 내부에 양식 제어 입력 표시

  14. 14

    $ _POST 데이터를 사용할 수없는 부트 스트랩 양식 제출

  15. 15

    양식 선택, 제출 후 옵션 선택 유지

  16. 16

    사용자 옵션 선택에 의한 양식 동작 변경 자바 스크립트

  17. 17

    부트 스트랩을 사용하여 단어 수 및 영숫자 값에 대한 양식의 유효성을 검사하는 방법

  18. 18

    백본 양식은 백본 컬렉션 및 선택 편집기에 대한 옵션을 사용합니다.

  19. 19

    사용자가 선택한 옵션에 따라 JQuery를 사용하여 양식을 제출하는 방법

  20. 20

    승리 양식의 경고 및 정보 공급자 제어

  21. 21

    자식 클래스의 부모 선택 / 복제-부모 및 appendTo / insertAfter 결과 내의 다양한 속성에 텍스트 추가

  22. 22

    부트 스트랩 선택에서 양식 제어와 같은 : focus & : valid 값을 얻는 방법은 무엇입니까?

  23. 23

    Angular2 및 Html 양식-양방향 데이터 바인딩 공백, 필수, 선택 문제

  24. 24

    html 및 php로 이전 양식 제어에서 값을 선택한 경우에만 양식 제어 표시

  25. 25

    다양한 결제 옵션에 대한 고유 한 고급 설정을 사용하는 사용자 지정 스트라이프 체크 아웃 양식

  26. 26

    새 부트 스트랩 탭에 양식 입력 복제

  27. 27

    POST로 제출되지 않는 부트 스트랩 양식

  28. 28

    부트 스트랩 모달 문의 양식 문제

  29. 29

    내 양식을 제출하는 부트 스트랩 모달

뜨겁다태그

보관