10

次のCSSを含むテキストフィールドとボタンがあります。

JS フィドル リンク: http://jsfiddle.net/Tdkre/ 

.submit {
      -moz-box-shadow:inset 0px 1px 0px 0px #cae3fc;
      -webkit-box-shadow:inset 0px 1px 0px 0px #cae3fc;
      box-shadow:inset 0px 1px 0px 0px #cae3fc;
      background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #4197ee) );
      background:-moz-linear-gradient( center top, #79bbff 5%, #4197ee 100% );
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#4197ee');
      background-color:#79bbff;
     -moz-border-radius:6px;
     -webkit-border-radius:6px;
     border-radius:6px;
     border:1px solid #469df5;
     display:inline-block;
     color:#ffffff;
     font-family:arial;
     font-size:14px;
     font-weight:bold;
     padding:5px 14px;
     text-decoration:none;
     text-shadow:1px 1px 0px #287ace;
    cursor:pointer;
}
.submit:hover {
     background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4197ee), color-stop(1, #79bbff) );
     background:-moz-linear-gradient( center top, #4197ee 5%, #79bbff 100% );
     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4197ee', endColorstr='#79bbff');
     background-color:#4197ee;
}
 .submit:active {
   position:relative;
   top:1px;
}

 .text-input {
    padding: 6px;
    font-size: 13px;
    border: 1px solid #d5d5d5;
    color: #333;
    border-radius: 4px 4px 4px 4px !important;
 }

<form>
    <input type="text" class="text-input" size="40"/>
    <input type="button" value="Upload" id="upload" class="submit"/>
</form>

ファイル アップロードの入力タイプに同じスタイルを追加したい。CSS初心者です。このスタイルをファイル アップロード ボタンに使用するにはどうすればよいですか?

4

8 に答える 8

17

この解決策を試してください: http://jsfiddle.net/JJRrc/1/

HTML

<p class="form">
  <input type="text" id="path" />
  <label class="add-photo-btn">upload
    <span>
       <input type="file" id="myfile" name="myfile" />
    </span>
  </label>
</p>

CSS

.form input[type="file"]{
  z-index: 999;
  line-height: 0;
  font-size: 50px;
  position: absolute;
  opacity: 0;
  filter: alpha(opacity = 0);-ms-filter: "alpha(opacity=0)";
  cursor: pointer;
  _cursor: hand;
  margin: 0;
  padding:0;
  left:0;
  }
 .add-photo-btn{
   position:relative;
   overflow:hidden;
   cursor:pointer;
   text-align:center;
   background-color:#83b81a;
   color:#fff;
   display:block;
   width:197px;
   height:31px;
   font-size:18px;
   line-height:30px;
   float:left;
 }
 input[type="text"]{
   float:left;
 }

JQuery

$('#myfile').change(function(){
  $('#path').val($(this).val());
});
于 2013-01-18T15:35:57.743 に答える
8

私はこれを試してみましたが、私にはかなり良さそうです。これに欠陥はありますか？ここにjsfiddleリンクがありますhttp://jsfiddle.net/Tdkre/1/

#FileUpload {
    position:relative;
}

#BrowserVisible {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    background:url(upload.png) 100% 1px no-repeat;
    width:345px;
    height:30px;
}

#FileField {
    width:250px;
    margin-right:85px;
    padding: 6px;
    font-size: 13px;
    background: #fff url('bg-form-field.gif') top left repeat-x;
    border: 1px solid #d5d5d5;
    color: #333;
    border-radius: 4px 4px 4px 4px !important;
}

#BrowserHidden {
    position:relative;
    width:345px;
    height:30px;
    text-align: right;
    -moz-opacity:0;
    filter:alpha(opacity: 0);
    opacity: 0;
    z-index: 2; 
}

<div id="FileUpload">
<input type="file" size="24" id="BrowserHidden" onchange="getElementById('FileField').value = getElementById('BrowserHidden').value;" />
<div id="BrowserVisible"><input type="text" id="FileField" /></div>

ここに画像があります ここに画像の説明を入力 ここに画像の説明を入力

于 2013-01-18T16:27:11.667 に答える
3

これを試して：

css ファイルで、これをファイルの末尾または別の場所に配置します: input[type="file"]::-webkit-file-upload-button. この構文は、ボタン スタイル専用です。

そこにのみ置く場合：input[type="file"]ファイル名がある配列のスタイルを設定できます。

于 2014-05-25T06:41:02.230 に答える
1

変更されていない 1 つ以上の html<input type="file">要素を含むページで、この比較的短い jQuery を実行します。

jQuery は要素を非表示にし、同じ動作を模倣する適切な場所に新しい要素を挿入します。

この回答はページの他の回答と似ていますが、IE ブラウザーと、開発者が慎重に検討された Web 標準をサポートするために実際に時間をかけているブラウザーでテストされています。

$(document).ready(function(){

  // replace all file upload elements for styling purposes
  $('input[type="file"]').each(function(){
    var btn = $('<button class="file">Browse...</button>');
    var txt = $('<span class="file"></span>');
    $(this).after(txt).after(btn);
    $(this).css({display:'none'});
    var target = this;
    $(btn).click(function(ev){ 
      ev.preventDefault(); 
      $(target).click(); 
    })
    $(target).change(function(){
      // IE uses a stupid renaming scheme that includes "fake-path"
      var fname = $(target).val()
      $(txt).html(fname.substr(fname.lastIndexOf('\\')+1));
    });
  });
});

button.fileあとは、span.file好きなようにスタイリングするだけで、準備完了です。

于 2014-01-23T17:44:12.750 に答える
1

ファイル アップロード ボタンのスタイルを設定するのは非常に難しいことで知られていますが、jQuery とプラグインを使用したい場合は、これが非常に便利であることがわかりました。

これにより、任意の DOM 要素でファイル アップロード ボタンの機能を「偽装」できるようになるため、好きなようにスタイルを設定できます。古い IE バージョンを含むすべての主要なブラウザーでうまく動作します。

于 2013-01-18T15:46:03.960 に答える