입력 유형 =“파일”버튼 스타일링 스타일을 어떻게

입력 type="file"버튼의 스타일을 어떻게 지정합니까 ?

답변

대부분의 브라우저는 CSS 또는 자바 스크립트에서 모양을 변경하지 않기 때문에 파일 입력 스타일링이 어려운 것으로 악명이 높습니다.

입력 크기조차도 다음과 같은 것에 응답하지 않습니다.

<input type="file" style="width:200px">

대신 size 속성을 사용해야합니다.

<input type="file" size="60" />

그보다 세련된 스타일 (예 : 찾아보기 버튼 모양 변경)의 경우 기본 파일 입력 위에 스타일이 지정된 버튼과 입력 상자를 오버레이하는 까다로운 접근 방식을 살펴 봐야합니다. www.quirksmode.org/dom/inputfile.html 에서 rm이 ​​이미 언급 한 기사 는 내가 본 것 중 최고입니다.

최신 정보

<input>태그를 직접 스타일링하는 것은 어렵지만 태그를 사용하면 쉽게 수행 할 수 있습니다 <label>. 아래 @JoshCrozier의 답변을 참조하십시오 : https://stackoverflow.com/a/25825731/10128619

답변

이를 위해 JavaScript가 필요하지 않습니다! 크로스 브라우저 솔루션은 다음과 같습니다.

이 예를보십시오! -Chrome / FF / IE에서 작동-(IE10 / 9 / 8 / 7)

가장 좋은 방법은 숨겨진 파일 입력 요소에 for속성이 첨부 된 사용자 정의 레이블 요소를 사용하는 것 입니다. 이 작업을 수행 하려면 레이블의 속성이 파일 요소 의 속성과 일치해야합니다 .forid

<label for="file-upload" class="custom-file-upload">
    Custom Upload
</label>
<input id="file-upload" type="file"/>

대안으로, 파일 입력 요소를 레이블로 직접 랩핑 할 수도 있습니다 (예).

<label class="custom-file-upload">
    <input type="file"/>
    Custom Upload
</label>

스타일링 측면 에서 속성 선택기를 사용하여 입력 요소를 숨기십시오 1 .

input[type="file"] {
    display: none;
}

그런 다음 사용자 정의 label요소의 스타일을 지정하기 만하면됩니다. (예) .

.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}

1-을 사용하여 요소를 숨기면 display: noneIE8 이하에서 작동하지 않습니다. 또한 jQuery validate 는 기본적으로 숨겨진 필드의 유효성을 검사 하지 않습니다 . 이러한 것들 중 하나가 문제가 될 경우, 이러한 상황에서 작동 하는 입력 ( 1 , 2 ) 을 숨기는 두 가지 방법 이 있습니다.

답변

다음 단계에 따라 파일 업로드 양식에 대한 사용자 정의 스타일을 작성할 수 있습니다.

  1. 이것은 간단한 HTML 양식입니다 (아래에 작성한 HTML 주석을 읽으십시오)

    <form action="#type your action here" method="POST" enctype="multipart/form-data">
  <div id="yourBtn" style="height: 50px; width: 100px;border: 1px dashed #BBB; cursor:pointer;" onclick="getFile()">Click to upload!</div>
  <!-- this is your file input tag, so i hide it!-->
  <div style='height: 0px;width:0px; overflow:hidden;'><input id="upfile" type="file" value="upload"/></div>
  <!-- here you can have file submit button or you can write a simple script to upload the file automatically-->
  <input type="submit" value='submit' >
</form>

  2. 그런 다음이 간단한 스크립트를 사용하여 click 이벤트를 파일 입력 태그로 전달하십시오.

    function getFile(){
     document.getElementById("upfile").click();
}

    이제 기본 스타일을 변경하는 방법에 대한 걱정없이 모든 유형의 스타일을 사용할 수 있습니다.

한 달 반 동안 기본 스타일을 변경하려고했기 때문에 이것을 잘 알고 있습니다. 브라우저마다 업로드 입력 태그가 다르기 때문에 매우 어렵습니다. 따라서이 파일을 사용하여 사용자 정의 파일 업로드 양식을 작성하십시오. 전체 자동 업로드 코드는 다음과 같습니다.

function getFile() {
  document.getElementById("upfile").click();
}

function sub(obj) {
  var file = obj.value;
  var fileName = file.split("\\");
  document.getElementById("yourBtn").innerHTML = fileName[fileName.length - 1];
  document.myForm.submit();
  event.preventDefault();
}
#yourBtn {
  position: relative;
  top: 150px;
  font-family: calibri;
  width: 150px;
  padding: 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border: 1px dashed #BBB;
  text-align: center;
  background-color: #DDD;
  cursor: pointer;
}
<form action="#type your action here" method="POST" enctype="multipart/form-data" name="myForm">
  <div id="yourBtn" onclick="getFile()">click to upload a file</div>
  <!-- this is your file input tag, so i hide it!-->
  <!-- i used the onchange event to fire the form submission-->
  <div style='height: 0px;width: 0px; overflow:hidden;'><input id="upfile" type="file" value="upload" onchange="sub(this)" /></div>
  <!-- here you can have file submit button or you can write a simple script to upload the file automatically-->
  <!-- <input type="submit" value='submit' > -->
</form>
스 니펫 확장

답변

CSS로 숨기고 $ (selector) .click ()과 함께 사용자 정의 버튼을 사용하여 찾아보기 버튼을 활성화하십시오. 그런 다음 파일 입력 유형의 값을 확인하는 간격을 설정하십시오. 간격은 사용자의 값을 표시하여 사용자가 업로드되는 내용을 볼 수 있습니다. 양식을 제출하면 간격이 지워집니다. [편집] 죄송합니다. 매우 바빠서이 게시물을 업데이트하는 것이 었습니다. 여기에 예가 있습니다.

<form action="uploadScript.php" method="post" enctype="multipart/form-data">
<div>
    <!-- filename to display to the user -->
    <p id="file-name" class="margin-10 bold-10"></p>

    <!-- Hide this from the users view with css display:none; -->
    <input class="display-none" id="file-type" type="file" size="4" name="file"/>

    <!-- Style this button with type image or css whatever you wish -->
    <input id="browse-click" type="button" class="button" value="Browse for files"/>

    <!-- submit button -->
    <input type="submit" class="button" value="Change"/>
</div>
$(window).load(function () {
    var intervalFunc = function () {
        $('#file-name').html($('#file-type').val());
    };
    $('#browse-click').on('click', function () { // use .live() for older versions of jQuery
        $('#file-type').click();
        setInterval(intervalFunc, 1);
        return false;
    });
});

답변

HTML

<div class="new_Btn">SelectPicture</div><br>
<input id="html_btn" type='file'" /><br>

CSS

.new_Btn {
// your css propterties
}

#html_btn {
 display:none;
}

jQuery

$('.new_Btn').bind("click" , function () {
        $('#html_btn').click();
    });
//edit: 6/20/2014: Be sure to use ".on" not ".bind" for newer versions of jQuery

피들 : http://jsfiddle.net/M7BXC/

일반적인 JavaScript를 사용하면 jQuery 없이도 목표를 달성 할 수 있습니다.

이제 newBtn은 html_btn과 연결되어 있으며 원하는대로 새 btn의 스타일을 지정할 수 있습니다.

답변

를 만들면 모든 렌더링 엔진이 자동으로 버튼을 <input type="file">생성합니다. 역사적으로이 버튼은 완전히 스타일을 지정할 수 없었습니다. 그러나 Trident와 WebKit은 유사 요소를 통해 후크를 추가했습니다.

삼지창

IE10부터는 ::-ms-browsepseudo-element를 사용하여 파일 입력 버튼의 스타일을 지정할 수 있습니다 . 기본적으로 일반 버튼에 적용하는 모든 CSS 규칙은 유사 요소에 적용 할 수 있습니다. 예를 들면 다음과 같습니다.

::-ms-browse {
  background: black;
  color: red;
  padding: 1em;
}
<input type="file">
스 니펫 확장

이것은 Windows 8의 IE10에서 다음과 같이 표시됩니다.

WebKit

WebKit은 파일 ::-webkit-file-upload-button요소에 의사 요소 가 포함 된 후크를 제공합니다 . 다시 말하지만 거의 모든 CSS 규칙을 적용 할 수 있으므로 Trident 예제도 여기에서 작동합니다.

::-webkit-file-upload-button {
  background: black;
  color: red;
  padding: 1em;
}
<input type="file">
스 니펫 확장

OS X의 Chrome 26에서 다음과 같이 표시됩니다.

답변

Bootstrap 3을 사용하는 경우 이것이 효과가 있습니다.

참조 http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/를

.btn-file {
  position: relative;
  overflow: hidden;
}
.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;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<span class="btn btn-primary btn-file">
    Browse...<input type="file">
</span>
스 니펫 확장

다음 파일 입력 버튼이 생성됩니다.

진심으로, http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/을 확인 하십시오