부트 스트랩의 선택 테두리 - 반경 변경

부트 스트랩 3의 선택 요소에 대한 경계 반경을 변경할 수 없습니다. 배경색 또는 테두리 색상과 같은 다른 속성을 변경해 보았습니다. 유일하게 작동하지 않는 스타일은 border-radius입니다. 내가 뭘 잘못하고 있는지 모르겠다.부트 스트랩의 선택 테두리 - 반경 변경

HTML :

<div class="container"> 
    <form role="form" class="form-horizontal" method="get" action="<?php $_SERVER['PHP_SELF']; ?>"> 
     <div class="form-group"> 
      <div class="col-md-6 col-md-offset-3"> 
       <div class="input-group"> 
        <input type="text" class="form-control search-box" placeholder="Search"> 
        <span class="input-group-addon"> 
         <span class="glyphicon glyphicon-search"></span> 
        </span> 
       </div> 
      </div> 
     </div> 
     <div class="form-group"> 
      <div class="col-md-6 col-md-offset-3"> 
       <div class="col-md-6"> 
        <select class="form-control"></select> 
       </div> 
       <div class="col-md-6"> 
        <select class="form-control"></select> 
       </div> 
      </div> 
     </div> 
    </form> 
</div>

CSS :

body { 
    padding: 0; 
    margin: 0; 
} 

.form-horizontal { 
    margin-top: 50px; 
} 

/* Remove border-radius, box-shadow, border-right and transition of input box */ 
.search-box { 
    border-radius: 0px; 
    box-shadow: none !important; 
    border-right: none; 
    transition: none; 
    font-size: 16px; 
} 

/* Remove addon border-radius to match input border-radius */ 
.input-group-addon { 
    border-top-right-radius: 0; 
    border-bottom-right-radius: 0; 
    background-color: #fff; 
} 

/* Change addon border-color to the same color as the input box when input:focus */ 
.search-box:focus, .search-box:focus + span { 
    border-color: #3498db; 
} 

/* Trying to change border-radius on the select element, not working... */ 
select { 
    box-shadow: none !important; 
    transition: none !important; 
    border-radius: 0px !important; 
}

출처

2014-07-16 phre

크롬, 파이어 폭스 및 ie에서 작동합니다. http://jsfiddle.net/codeandcloud/jUdLn/ 누락 된 추가 정보가 있습니까? – naveen

검색 상자와 같이 구석에 구석이 없도록하고 싶습니다. 당신이 제공 한 링크에서 select의 border-radius를 보여줍니다. – phre

'.input-group select {border-radius : 0px! important;}'시도해보십시오. 문제가 해결 될 수 있다고 생각합니다. –

당신의 CSS에이를 추가합니다. 그러나 크롬에 표시된 좋은 화살표를 제거합니다 :

select.form-control { 
    -webkit-appearance: none; 
}

당신은 -webkit-border-radius: 0px;을 추가 할 수 있습니다.

부트 스트랩 문제 #15588도 참조하십시오.

출처

2015-04-23 08:33:36 joost

그게 전부입니다. 감사합니다 – Zl3n

이것은 텍스트를 아래로 밀어냅니다. –

이 작업을 시도 할 수 있습니다 :

select.form-control { 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    background: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='18' height='18' viewBox='0 0 24 24'><path fill='grey' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>") #fff; 
    background-position: 98% 50%; 
    background-repeat: no-repeat; 
}

크롬, 파이어 폭스와 사파리에서 테스트.

출처

2016-11-15 14:59:39 sstauross

부트 스트랩 4에서도 작동합니다. – VSG24

부트 스트랩의 선택 테두리 - 반경 변경

답변

관련 문제