如何设置文件样式？

Question

好，所以我得到了以下信息：

我想要做的是使显示“ Elegir archivos”的按钮变为橙色，就像显示“ Finalizar”的按钮一样，并使文件输入的文本像显示“ Formatos aceptados”的文本一样显示灰色。 这是我尝试过的：

       <tr>
                        <td  class="upload-pic"><input class="file-submit" type="file" name="fileUpload" size="50" multiple="multiple"/></td>
       </tr>

CSS：

.file-submit {
    height: 35px !important;
    width: 300px !important;
    padding: 5px !important;
    font-size: 15px !important;
    margin-right: 10px !important;
    margin-top: 10px !important;
    margin-bottom: 20px !important;
    background-color:red;
}

input[type="file"] {
    width: 80%;
    color: white;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background-color: #FD8907;
    margin-left: 10px;
    float: right;
}

我想要的是：显示“ Elegir archivos”的按钮必须为橙色，其文本为白色。旁边的文字为“ No se eligio archivo”必须为灰色，并带有白色背景。出于某种原因，所有内容最终都会显示在一个橙色的大框中，并且该按钮仍然看起来像默认的按钮。

Answer 1

基本上，问题是浏览器不知道您希望它是橙色的。 因为您的文件说它是一个按钮，因此正在向其应用默认HTML按钮样式。要清除此问题，在CSS中，您只需要说：

tr td input.file-submit {
  text-decoration: none; 
  color: #ffffff; 
}

然后，只需将文本的颜色更改为＃848D95。

你去了。做完了

希望这会有所帮助！

Answer 2

为了实现这一点，可以在输入按钮上加上“标签”，以使标签变为可点击状态。然后将输入按钮的不透明度设为0（透明）。

$('.file-submit').on('change', function(){
	$(this).closest('.btn-wrapper').find('span')
         .text('FOTOS Formatos aceptados: JPG');
})

.btn-wrapper {
  font-family: 'Veranda', sans-serif;
}

.btn-file {
  padding: 8px 15px;
  background-color: #fd8907;
  border-radius: 3px;
  color: #fff;
  margin-right: 8px;
}

.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

.btn-file span {
  display: block;
  color: #777;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td>
  <div class="btn-wrapper">
  <label class="btn-file">
	  Elegir archivos
    <input type="file" class="file-submit" name="fileUpload" accept=".jpg" multiple="multiple">
	</label>
  <span>No se eligio archivo</span>
  </div>
</td>

但是，如果要在选择文件后更改文本，则需要有关javascript或jQuery的帮助。