Как вы добавляете стандартный контур?

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; 
} 

EDIT: Я понимаю, класс и идентификатор являются немного двойной, но это не было моим главным приоритетом прямо сейчас. :)

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>