표준 개요를 어떻게 추가합니까?

Question

그래서 내가하려는 것은 블록에 표준 개요를 추가하는 것입니다. 저는 스타일을 "파일"이라고 생각합니다. 그러나 이제는 "파일 추가"버튼에 표준 외곽선이 없습니다 (나머지 버튼에는 있습니다). 그래서 버튼에 표준 웹 브라우저 개요가 있어야합니다. 누군가가 저를 도울 수 있습니까? 재미를 위해 : 여기에 내가 지금 가지고있는 코드가있다. (미안 ID와 클래스 등은 네덜란드어이다.)

HTML :

<label class="afbeeldingknop" id="afbeeldingknop"> 
    Klik hier om een afbeelding te uploaden 
    <input type="file" name="image" accept="image"/> 
</label> 

CSS :

#afbeeldingknop { 
    background-color: $yellow; 
    border: none; 
    color: white; 
    padding-top: 15px; 
    padding-bottom: 15px; 
    text-align: center; 
    text-decoration: none; 
    display: inline-block; 
    font-family: 'Exo 2', sans-serif; 
    margin: 4px 2px; 
    cursor: pointer; 
    width: 100%; 
    /*outline:?!?; This is the part where you could help me I guess*/ 
} 

.afbeeldingknop [type=file] { 
    cursor: inherit; 
    display: block; 
    filter: alpha(opacity=0); 
    opacity: 0; 
    position: absolute; 
    right: 0; 
    top: 0; 
} 

편집 : 나는 클래스와 ID가 조금 번 깨닫게하지만 지금 내 주요 우선 순위가 아니었다. :)

개요와

Answer 1

:

outline: 3px solid color; 

또는 테두리 :

border: 2px solid color; 

More outline options here & 예를 아래 :

#afbeeldingknop { 
 
    background-color: $yellow; 
 
    border: none; 
 
    color: white; 
 
    padding-top: 15px; 
 
    padding-bottom: 15px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    font-family: 'Exo 2', sans-serif; 
 
    margin: 4px 2px; 
 
    cursor: pointer; 
 
    width: 100%; 
 
    outline: 3px solid skyblue; 
 
} 
 
.afbeeldingknop [type=file] { 
 
    cursor: inherit; 
 
    display: block; 
 
    filter: alpha(opacity=0); 
 
    opacity: 0; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
}

<label class="afbeeldingknop" id="afbeeldingknop"> 
 
    Klik hier om een afbeelding te uploaden 
 
    <input type="file" name="image" accept="image" /> 
 
</label>