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

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。它的作用是使您的输入和标签不可见，因此即使用户认为他实际上是在单击显示的文本点击输入标签或按钮。