用css

Question

我添加了一个＆＃34;浏览＆＃34;使用此命令上传文件的按钮

<input type="file" name="ForUpload[]" id="ForUpload" class="brw" onchange="addIitem()" on>

和这个css风格

.brw {
  font-size: 20px;
  color: white;
  display: inline-block;
  background: #1CB6E0;
  border: none;
  padding: 7px 15px;
  font-weight: 700;
  border-radius: 3px;
  white-space: nowrap;
  cursor: pointer;
}

当我用firefox运行它时，我看到＆＃34;没有选择文件＆＃34;和＆＃34;浏览...＆＃34;作为按钮文字。请看图

我想放一个按钮并将自定义文字写为占位符，例如请选择音乐文件。我怎么能这样做？

Answer 1

我建议使用输入标签引用的标签标签作为显示按钮，输入标签使用display：none。输入标签的CSS确实不是很好。

.brw {
  font-size: 20px;
  color: white;
  display: inline-block;
  background: #1CB6E0;
  border: none;
  padding: 7px 15px;
  font-weight: 700;
  border-radius: 3px;
  white-space: nowrap;
  cursor: pointer;
}

<input type="file" name="ForUpload[]" id="ForUpload" style="display:none" onchange="addIitem()" on>
<label for="ForUpload" class="brw">For Upload</label>

Answer 2

实际上这个按钮样式是固定且不可更改的，但您可以将样式设置为另一个框，元素或按钮，并将主文件按钮设置为不可见，并设置样式框，元素或按钮单击事件以触发主文件按钮单击。

Answer 3

我认为此代码对您有所帮助。

'use strict';

;( function ( document, window, index )
{
	var inputs = document.querySelectorAll( '.inputfile' );
	Array.prototype.forEach.call( inputs, function( input )
	{
		var label = input.nextElementSibling,
		labelVal = label.innerHTML;

		input.addEventListener( 'change', function( e )
		{
			var fileName = '';
			if( this.files && this.files.length > 1 )
				fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
			else
				fileName = e.target.value.split( '\\' ).pop();

			if( fileName )
				label.querySelector( 'span' ).innerHTML = fileName;
			else
				label.innerHTML = labelVal;
		});

		// Firefox bug fix
		input.addEventListener( 'focus', function(){ input.classList.add( 'has-focus' ); });
		input.addEventListener( 'blur', function(){ input.classList.remove( 'has-focus' ); });
	});
}( document, window, 0 ));

.brw {
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  width: 0.1px;
  z-index: -1;
}
.brw + label {
  background-color: #1DB6E0;
  color: #fff;
  cursor: pointer;
  padding:10px;  
  text-overflow: ellipsis;
  white-space: nowrap;  
} 
.brw + label svg {
  fill: currentcolor;
  height: 1.5em;
  margin-right: 0.25em;
  margin-top: -0.25em;
  vertical-align: middle;
  width: 1.5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <input type="file" name="ForUpload[]" id="ForUpload" class="inputfile brw" />
  <label for="ForUpload"><svg width="20" height="17" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg><span>Please select the music file&hellip;</span></label>
</div>

Answer 4

.file-input {
  display: block;
  border: 1px solid #f00;
  cursor: pointer;
}
.file-input .label {
  border: 1px solid #00f;
}
.file-input .input {
  display: block /* to allow shape - since it's 'inline' by default */;
  opacity: 0;
  width: 0;
  height: 0;
  overflow: hidden /* probably a better way */;
}

<label for='file-input-1' class='file-input'>
  <div class='label'>
    <span>Put your  here</span>
  </div>

  <input id='file-input-1' class='input' type='file' />
</label>