输入文件字段文本样式不适用

Question

我正在尝试设置我的文件输入文本元素的样式。 它应该如下所示：

但是目前用下面的代码外观是这样的：

我不知道如何设置文本本身的样式，只有按钮得到了填充..

我也在努力解释问题，希望截图清晰。

提前致谢。

.marketing__block {
  padding-bottom: 44px;
  width: 100%;
  overflow: hidden;
}

.marketing__block h4 {
  text-transform: uppercase;
}

h4 {
  font-size: 14px;
  line-height: 14px;
  font-weight: normal;
  font-family: 'BrandonTextBlack';
  margin: 0 0 15px 0;
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

.marketing__row {
  margin-bottom: 8px;
  width: 100%;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="file"] {
  border: 0;
  background: #f7f7f7;
  width: 100%;
  height: 44px;
  padding: 0 30px;
  font-size: 15px;
  font-family: 'Open Sans', sans-serif;
}

input[type="file"] {
  padding: 15px;
}

input,
select,
textarea {
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  color: #595959;
}

textarea {
  border: 0;
  background: #f7f7f7;
  width: 100%;
  height: 155px;
  padding: 15px 30px;
  font-size: 15px;
  resize: none;
  font-family: 'Open Sans', sans-serif;
}

.button {
  display: inline-block;
  border: 3px solid #efc506;
  color: #efc506;
  font-size: 18px;
  text-align: center;
  text-transform: uppercase;
  font-family: 'BrandonTextBlack';
  padding: 12px 36px;
  background: none;
  transition: all 0.2s;
  position: relative;
}

<div class="marketing__block">
  <h4>Solliciteer online</h4>

  <form name="job_form" method="post" action="" enctype="multipart/form-data" class="ng-pristine ng-valid">
    <fieldset>
      <div class="marketing__row">
        <input type="text" id="job_form_firstName" name="job_form[firstName]" required="required" placeholder="Voornaam *">
      </div>

      <div class="marketing__row">
        <input type="text" id="job_form_name" name="job_form[name]" required="required" placeholder="Naam *">
      </div>

      <div class="marketing__row">
        <input type="email" id="job_form_email" name="job_form[email]" required="required" placeholder="Email *">
      </div>

      <div class="marketing__row">
        <input type="text" id="job_form_tel" name="job_form[tel]" placeholder="Telefoon Nr.">
      </div>

      <div class="marketing__row">
        <input type="text" id="job_form_url" name="job_form[url]" placeholder="Url">
      </div>


      <div class="marketing__row">
        <input type="file" id="job_form_attachment" name="job_form[attachment]" placeholder="form.label.attachment">
      </div>


      <div class="marketing__row">
        <textarea id="job_form_message" name="job_form[message]" placeholder="Bericht"></textarea>
      </div>




      <div><button type="submit" id="job_form_submit" name="job_form[submit]" class="button">Verstuur</button></div>
    </fieldset>
    <input type="hidden" id="job_form_type" name="job_form[type]" value="form_job_application"><input type="hidden" id="job_form__token" name="job_form[_token]" value="">
  </form>
</div>

Answer 1

输入文件不同于其他输入类型。您不能直接从 css 更改它。你应该做的是。

<div>
  <element you will style>
  <label for="file-input">a label</label>
  <input type="file" id="file-input">
</div>

将它包裹在一个 div 之间。然后将输入和标签不透明度更改为 0 并将其设为绝对且全部为左、顶部等 = 0。它的作用是使您的输入和标签不可见，因此即使用户认为他实际上是在点击显示的文本点击输入标签或按钮。

Answer 2

您可以隐藏文件输入并设置标签样式以匹配您的设计。

.marketing__block {
  padding-bottom: 44px;
  width: 100%;
  overflow: hidden;
}

.marketing__block h4 {
  text-transform: uppercase;
}

h4 {
  font-size: 14px;
  line-height: 14px;
  font-weight: normal;
  font-family: 'BrandonTextBlack';
  margin: 0 0 15px 0;
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

.marketing__row {
  margin-bottom: 8px;
  width: 100%;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="file"],
.filelabel {
  border: 0;
  background: #f7f7f7;
  width: 100%;
  height: 44px;
  padding: 0 30px;
  font-size: 15px;
  font-family: 'Open Sans', sans-serif;
}

input[type="file"] {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  opacity:0
}

.filelabel {
  display:block;
  color: #595959;
  height:42px;
  line-height:42px;
}

input,
select,
textarea,
.filelabel {
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  color: #595959;
}

textarea {
  border: 0;
  background: #f7f7f7;
  width: 100%;
  height: 155px;
  padding: 15px 30px;
  font-size: 15px;
  resize: none;
  font-family: 'Open Sans', sans-serif;
}

.button {
  display: inline-block;
  border: 3px solid #efc506;
  color: #efc506;
  font-size: 18px;
  text-align: center;
  text-transform: uppercase;
  font-family: 'BrandonTextBlack';
  padding: 12px 36px;
  background: none;
  transition: all 0.2s;
  position: relative;
}

<div class="marketing__block">
  <h4>Solliciteer online</h4>

  <form name="job_form" method="post" action="" enctype="multipart/form-data" class="ng-pristine ng-valid">
    <fieldset>
      <div class="marketing__row">
        <input type="text" id="job_form_firstName" name="job_form[firstName]" required="required" placeholder="Voornaam *">
      </div>

      <div class="marketing__row">
        <input type="text" id="job_form_name" name="job_form[name]" required="required" placeholder="Naam *">
      </div>

      <div class="marketing__row">
        <input type="email" id="job_form_email" name="job_form[email]" required="required" placeholder="Email *">
      </div>

      <div class="marketing__row">
        <input type="text" id="job_form_tel" name="job_form[tel]" placeholder="Telefoon Nr.">
      </div>

      <div class="marketing__row">
        <input type="text" id="job_form_url" name="job_form[url]" placeholder="Url">
      </div>


      <div class="marketing__row">
        <label for="job_form_attachment" class="filelabel">Label</label>
        <input type="file" id="job_form_attachment" name="job_form[attachment]" placeholder="form.label.attachment">
      </div>


      <div class="marketing__row">
        <textarea id="job_form_message" name="job_form[message]" placeholder="Bericht"></textarea>
      </div>




      <div><button type="submit" id="job_form_submit" name="job_form[submit]" class="button">Verstuur</button></div>
    </fieldset>
    <input type="hidden" id="job_form_type" name="job_form[type]" value="form_job_application"><input type="hidden" id="job_form__token" name="job_form[_token]" value="">
  </form>
</div>