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

时间：2017-03-17 13:32:30

标签： html css file symfony input

我试图设置文件输入文本元素的样式。 它应该如下所示： enter image description here

但目前下面的代码外观如下：

enter image description here

我不知道如何设置文本本身，只有按钮正在填充..

我也在努力解释这个问题，我希望屏幕截图很清楚。

提前致谢。

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

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

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

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

答案 1 :(得分：0)

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

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

相关问题
最新问题