Question

所以，我要做的是将标准轮廓添加到块中。我正在以某种方式设置type =“file”，但现在的事情是“添加文件”按钮没有标准轮廓（我的其余按钮确实有）。所以我希望按钮也有一个标准的webbrowser-outline。有人可以帮我吗？为了好玩：这是我现在的代码（抱歉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＆amp;以下示例：

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

你如何添加标准大纲？

1 个答案: