標準アウトラインをどのように追加しますか？

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>