如何添加标准轮廓？

-3

所以，我试图做的事情是添加一个标准的大纲到块。我以某种方式设计了type =“file”，但现在的事情是“添加文件”按钮没有标准轮廓（我的按钮的其余部分确实有）。所以我希望按钮也有一个标准的浏览器大纲。有人可以帮助我吗？为了好玩：这里是我现在的代码（对不起，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; 
}

编辑：我意识到class和id都有点双，但是这不是我的主要优先现在。 :)

来源

2016-12-25 Tigerotic

https://developer.mozilla.org/en-US/docs/Web/CSS/outline –

在CSS中，您可以使用边框绘制轮廓 –

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

来源

2016-12-25 15:32:07 Syden

如何添加标准轮廓？

回答

相关问题