2016-07-20 8 views
0

내 페이지에 fileupload 컨트롤이 있습니다. 가짜 버튼으로 둘러 쌉니다. 이제 버튼의 색상을 black.I로 바꾸고 싶지만 다양한 방법을 시도했지만 달성 할 수 없었습니다.CSS를 검은 색으로 변경하십시오.

.fileUpload { 
 
    position: relative; 
 
    overflow: hidden; 
 
    margin: 10px; 
 
} 
 
.fileUpload input.upload { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
    font-size: 20px; 
 
    cursor: pointer; 
 
    opacity: 0; 
 
    filter: alpha(opacity=0); 
 
}
<div class="col-xs-4"> 
 
    <div class="fileUpload btn btn-primary"> 
 
    <span>Browse</span> 
 
    <input type="file" name="File" id="fileUpload" class="upload" style="background-color: black" /> 
 
    </div> 
 
</div>

도와주세요 : 여기 내 버튼과 CSS입니다. 작동하려면

답변

2

, 당신은 div.fileUpload 대신 input#fileUploadstyle="background-color: black"을 넣어해야합니다.

코드 :

<div class="col-xs-4"> 
    <div class="fileUpload btn btn-primary" style="background-color: black"> 
     <span>Browse</span> 
     <input type="file" name="File" id="fileUpload" class="upload"/> 
    </div> 
</div> 

코드 조각 : 변경 색상을 BG에 대한 유 background-image: none 및 광고를 설정해야합니다 background-image: linear-gradient... 때문에

.fileUpload { 
 
    position: relative; 
 
    overflow: hidden; 
 
    margin: 10px; 
 
} 
 

 
.fileUpload input.upload { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
    font-size: 20px; 
 
    cursor: pointer; 
 
    opacity: 0; 
 
    filter: alpha(opacity=0); 
 
}
<link media="all" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> 
 
<div class="col-xs-4"> 
 
    <div class="fileUpload btn btn-primary" style="background-color: black;border:0;"> 
 
    <span>Browse</span> 
 
    <input type="file" name="File" id="fileUpload" class="upload" /> 
 
    </div> 
 
</div>

+0

예 작동 했어요! 감사 ! – nini

+0

지금 대답을 수락 할 수없는 것 같습니다. – nini

+0

기꺼이 도와 드리겠습니다. 예, 수락하기 전에 몇 분이 필요합니다. –

1

부트 스트랩 버튼은 그라데이션이 d 태그 이름 은 부트 스트랩 스타일보다 우선 순위가 높으므로 background-color을 추가하십시오. 내 영어가 유감 스럽습니다.

div.fileUpload { 
 
    position: relative; 
 
    overflow: hidden; 
 
    margin: 10px; 
 
    background-color: black; 
 
    background-image: none; 
 
} 
 
.fileUpload input.upload { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
    font-size: 20px; 
 
    cursor: pointer; 
 
    opacity: 0; 
 
    filter: alpha(opacity=0); 
 
}
<!-- Свіжа збірка мінімізованих CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> 
 

 
<!-- Додаткові теми --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"> 
 
<div class="col-xs-4"> 
 
    <div class="fileUpload btn btn-primary"> 
 
    <span>Browse</span> 
 
    <input type="file" name="File" id="fileUpload" class="upload"/> 
 
    </div> 
 
</div>

1

난 당신이 버튼 배경 색상을 변경하거나 색상을 가져하기 위해, 부트 스트랩 버튼 (btn btn-primary)를 사용하고 볼 수 있습니다. 버튼을 마우스 오른쪽 버튼으로 클릭 한 다음 브라우저에서 요소 검사를 수행 할 수 있습니다.

는 부트 스트랩 호버의 스타일이 클래스를 덮어 쓰기 부트 스트랩 버튼 배경 색

.btn-primary { 
    color: #fff; 
    background-color: #000; 
    border-color: #2e6da4; 
} 

스타일을 사용자 정의 CSS에서이 덮어 쓰기 : 당신은 부트 스트랩을 실현합니다 관리자에서 봐 버튼을 다음과 같이 스타일 몇 가지 클래스가 버튼 특성

.btn:hover, .btn:focus, .btn.focus { 
    color: #333; 
    text-decoration: none; 
} 
관련 문제