html - एक इनपुट प्रकार स्टाइलिंग="फ़ाइल" बटन




css file-io (20)

इनपुट type="file" बटन को कैसे स्टाइल करें।


एचटीएमएल

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

सीएसएस

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

आप सामान्य जावास्क्रिप्ट के साथ jQuery के बिना भी अपने लक्ष्यों तक पहुंच सकते हैं।

अब newBtn html_btn से जुड़ा हुआ है और आप अपनी नई बीटीएन को स्टाइल कर सकते हैं जैसे आप चाहते हैं: डी


दृश्यता: छिपी हुई चाल

मैं आमतौर पर visibility:hidden लिए जाता हूं visibility:hidden चाल

यह मेरा स्टाइल बटन है

<div id="uploadbutton" class="btn btn-success btn-block">Upload</div>

यह इनपुट प्रकार = फ़ाइल बटन है। visibility:hidden ध्यान दें visibility:hidden नियम

<input type="file" id="upload" style="visibility:hidden;">

यह एक साथ गोंद करने के लिए जावास्क्रिप्ट बिट है। यह काम करता हैं

<script>
 $('#uploadbutton').click(function(){
    $('input[type=file]').click();
 });
 </script>

"महान" सीएसएस-केवल समाधानों द्वारा बेवकूफ़ बनें जो वास्तव में बहुत ही ब्राउज़र-विशिष्ट हैं, या वास्तविक बटन के शीर्ष पर स्टाइल बटन ओवरले करते हैं, या जो आपको <button> बजाय <label> का उपयोग करने के लिए मजबूर करते हैं। , या किसी अन्य ऐसे हैक। इसे सामान्य उपयोग के लिए काम करने के लिए जावास्क्रिप्ट आवश्यक है। अगर आप मुझ पर विश्वास नहीं करते हैं तो कृपया जीमेल और ड्रॉपज़ोन कैसे करें इसका अध्ययन करें।

बस एक सामान्य बटन को स्टाइल करें, हालांकि आप चाहते हैं, फिर अपने स्टाइल बटन पर एक छुपा इनपुट तत्व बनाने और लिंक करने के लिए एक साधारण जेएस फ़ंक्शन को कॉल करें।

<!DOCTYPE html>
<meta charset="utf-8">

<style>
    button {
        width            : 160px;
        height           : 30px;
        font-size        : 13px;
        border           : none;
        text-align       : center;
        background-color : #444;
        color            : #6f0;
    }
    button:active {
        background-color : #779;
    }
</style>

<button id="upload">Styled upload button!</button>

<script>

function Upload_On_Click(id, handler) {
    var hidden_input = null;
    document.getElementById(id).onclick = function() {hidden_input.click();}
    function setup_hidden_input() {
        hidden_input && hidden_input.parentNode.removeChild(hidden_input);
        hidden_input = document.createElement("input");
        hidden_input.setAttribute("type", "file");
        hidden_input.style.visibility = "hidden";
        document.querySelector("body").appendChild(hidden_input);
        hidden_input.onchange = function() {
            handler(hidden_input.files[0]);
            setup_hidden_input();
        };
    }
    setup_hidden_input();
}

Upload_On_Click("upload", function(file) {
    console.log("GOT FILE: " + file.name);
});

</script>

ध्यान दें कि जब भी उपयोगकर्ता फ़ाइल चुनता है, तब उपरोक्त कोड इसे फिर से लिंक करता है। यह महत्वपूर्ण है क्योंकि "बदले" को केवल तभी बुलाया जाता है जब उपयोगकर्ता फ़ाइल नाम बदलता है। लेकिन संभवतया उपयोगकर्ता इसे हर बार फ़ाइल प्राप्त करना चाहता हूं।


JQuery का उपयोग करके वास्तव में चालाक समाधान जो सभी पुराने ब्राउज़रों के साथ-साथ नए लोगों में भी काम करता है, मैंने here पाया। यह वास्तविक स्टाइल ब्राउज़िंग बटन का उपयोग करके सभी स्टाइल का ख्याल रखता है और () समस्याओं पर क्लिक करता है। मैंने एक सादा जावास्क्रिप्ट संस्करण बनाया: fiddle समाधान प्रतिभा के रूप में सरल है: फ़ाइल-इनपुट अदृश्य बनाएं, और माउस कर्सर के नीचे रखने के लिए कोड के एक टुकड़े का उपयोग करें।

<div class="inp_field_12" onmousemove="file_ho(event,this,1)"><span>browse</span>
<input id="file_1" name="file_1" type="file" value="" onchange="file_ch(1)">
</div>
<div id="result_1" class="result"></div>


function file_ho(e, o, a) {
    e = window.event || e;
    var x = 0,
    y = 0;
    if (o.offsetParent) {
        do {
        x += o.offsetLeft;
        y += o.offsetTop;
        } while (o = o.offsetParent);
    }
var x1 = e.clientX || window.event.clientX;
var y1 = e.clientY || window.event.clientY;
var le = 100 - (x1 - x);
var to = 10 - (y1 - y);
document.getElementById('file_' + a).style.marginRight = le + 'px';
document.getElementById('file_' + a).style.marginTop = -to + 'px';
}

.inp_field_12 {
position:relative;
overflow:hidden;
float: left;
width: 130px;
height: 30px;
background: orange;
}
.inp_field_12 span {
position: absolute;
width: 130px;
font-family:'Calibri', 'Trebuchet MS', sans-serif;
font-size:17px;
line-height:27px;
text-align:center;
color:#555;
}
.inp_field_12 input[type='file'] {
cursor:pointer;
cursor:hand;
position: absolute;
top: 0px;
right: 0px;
-moz-opacity:0;
filter:alpha(opacity: 0);
opacity: 0;
outline: none;
outline-style:none;
outline-width:0;
ie-dummy: expression(this.hideFocus=true);
}
.inp_field_12:hover {
background-position:-140px -35px;
}
.inp_field_12:hover span {
color:#fff;
}

इन चरणों का पालन करें, फिर आप अपनी फ़ाइल अपलोड फॉर्म के लिए कस्टम शैलियों का निर्माण कर सकते हैं:

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.) फिर इनपुट इनपुट फ़ाइल करने के लिए क्लिक इवेंट पास करने के लिए इस सरल स्क्रिप्ट का उपयोग करें।

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

अब आप डिफॉल्ट शैलियों को बदलने के बारे में चिंता किए बिना किसी भी प्रकार की स्टाइल का उपयोग कर सकते हैं। मैं इसे बहुत अच्छी तरह से जानता हूं, क्योंकि मैं डेढ़ महीने तक डिफ़ॉल्ट शैलियों को बदलने की कोशिश कर रहा हूं। मेरा मानना ​​है कि यह बहुत कठिन है क्योंकि विभिन्न ब्राउज़रों के पास अलग-अलग अपलोड इनपुट टैग होते हैं। तो अपने कस्टम फ़ाइल अपलोड फॉर्म बनाने के लिए इसका इस्तेमाल करें। यहां पूर्ण स्वचालित अपलोड कोड है।

<html>
<head>
<style>
#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;
  }
</style>
<script type="text/javascript">
 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();
  }
</script>
</head>
<body>
<center>
<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>
</center>
</body>
</html>

का आनंद लें!

आपका दिन शुभ हो,


इस हफ्ते मुझे बटन को कस्टम करने और चयनित फ़ाइल नाम को अलग करने की भी आवश्यकता है, इसलिए ऊपर दिए गए कुछ उत्तरों (धन्यवाद बीटीडब्ल्यू) पढ़ने के बाद मैं निम्नलिखित कार्यान्वयन के साथ आया:

HTML:

<div class="browse">
<label id="uploadBtn" class="custom-file-upload">Choose file
<input type="file" name="fileInput" id="fileInput" accept=".yaml" ngf-select ngf-change="onFileSelect($files)" />
</label>
<span>{{fileName}}</span>
</div>

सीएसएस

   input[type='file'] {
    color: #a1bbd5;
    display: none;

}

.custom-file-upload {
    border: 1px solid #a1bbd5;
    display: inline-block;
    padding: 2px 8px;
    cursor: pointer;
}

label{
    color: #a1bbd5;
    border-radius: 3px;
}

जावास्क्रिप्ट (कोणीय)

app.controller('MainCtrl', function($scope) {

        $scope.fileName = 'No file chosen';

          $scope.onFileSelect = function ($files) {
          $scope.selectedFile = $files;
          $scope.fileName = $files[0].name;
    };
});

असल में मैं ng-file-upload lib के साथ काम कर रहा हूं, कोणीय-वार मैं अपने $ दायरे में फ़ाइल नाम को बाध्य कर रहा हूं और इसे 'कोई फ़ाइल चुने गए' का प्रारंभिक मान नहीं दे रहा हूं, मैं भी FileSelect () फ़ंक्शन को बाध्यकारी कर रहा हूं मेरा दायरा इसलिए जब कोई फ़ाइल चुनी जाती है तो मुझे ng-upload API का उपयोग करके फ़ाइल नाम मिल रहा है और इसे $ scope.filename पर असाइन करें।


एकमात्र तरीका मैं सोच सकता हूं कि जावास्क्रिप्ट के साथ बटन को प्रस्तुत करने के बाद बटन ढूंढना और उसे स्टाइल असाइन करना है

आप www.quirksmode.org/dom/inputfile.html को भी देख सकते हैं


जब कोई <input type="file"> बनाया जाता है तो सभी प्रतिपादन इंजन स्वचालित रूप से एक बटन उत्पन्न करते हैं। ऐतिहासिक रूप से, वह बटन पूरी तरह से शैलीहीन नहीं रहा है। हालांकि, ट्राइडेंट और वेबकिट ने छद्म तत्वों के माध्यम से हुक जोड़ा है।

ट्राइडेंट

आईई 10 के अनुसार, फ़ाइल इनपुट बटन को ::-ms-browse छद्म-तत्व का उपयोग करके स्टाइल किया जा सकता है। असल में, किसी भी सीएसएस नियम जो आप नियमित बटन पर लागू करते हैं उसे छद्म-तत्व पर लागू किया जा सकता है। उदाहरण के लिए:

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

यह Windows 8 पर IE10 में निम्नानुसार प्रदर्शित होता है:

वेबकिट

वेबकिट ::-webkit-file-upload-button छद्म-तत्व के साथ अपने फ़ाइल इनपुट बटन के लिए एक हुक प्रदान करता है। फिर, बहुत सी सीएसएस नियम लागू किया जा सकता है, इसलिए ट्राइडेंट उदाहरण यहां भी काम करेगा:

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

यह ओएस एक्स पर क्रोम 26 में निम्नानुसार प्रदर्शित होता है:


मैं नीचे कोड का उपयोग कर शुद्ध सीएसएस के साथ ऐसा करने में सक्षम हूं। मैंने बूटस्ट्रैप और फ़ॉन्ट-कमाल का उपयोग किया है।

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />

<label class="btn btn-default btn-sm center-block btn-file">
  <i class="fa fa-upload fa-2x" aria-hidden="true"></i>
  <input type="file" style="display: none;">
</label>


यदि आप बूटस्ट्रैप 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/


यहां एक समाधान है जो वास्तव में <input type="file" /> तत्व को स्टाइल नहीं करता है बल्कि इसके बजाय अन्य तत्वों (जिसे स्टाइल किया जा सकता है) के शीर्ष पर <input type="file" /> तत्व का उपयोग करता है। <input type="file" /> तत्व वास्तव में दिखाई नहीं दे रहा है, इसलिए समग्र भ्रम एक अच्छी तरह से स्टाइल फ़ाइल अपलोड नियंत्रण का है।

मैं हाल ही में इस समस्या में आया और स्टैक ओवरफ़्लो पर बहुत अधिक उत्तरों के बावजूद, बिलकुल बिलकुल बिलकुल बिलकुल ठीक नहीं था। अंत में, मैंने इसे अनुकूलित करना समाप्त कर दिया ताकि एक सरल और सुरुचिपूर्ण समाधान हो सके।

मैंने फ़ायरफ़ॉक्स, आईई (11, 10 और 9), क्रोम और ओपेरा, आईपैड और कुछ एंड्रॉइड डिवाइस पर भी इसका परीक्षण किया है।

जेएसफ़ील्ड लिंक यहां है -> http://jsfiddle.net/umhva747/

$('input[type=file]').change(function(e) {
    $in = $(this);
    $in.next().html($in.val());
    
});

$('.uploadButton').click(function() {
    var fileName = $("#fileUpload").val();
    if (fileName) {
        alert(fileName + " can be uploaded.");
    }
    else {
        alert("Please select a file to upload");
    }
});
body {
    background-color:Black;
}

div.upload {
    background-color:#fff;
    border: 1px solid #ddd;
    border-radius:5px;
    display:inline-block;
    height: 30px;
    padding:3px 40px 3px 3px;
    position:relative;
    width: auto;
}

div.upload:hover {
    opacity:0.95;
}

div.upload input[type="file"] {
    display: input-block;
    width: 100%;
    height: 30px;
    opacity: 0;
    cursor:pointer;
    position:absolute;
    left:0;
}
.uploadButton {
    background-color: #425F9C;
    border: none;
    border-radius: 3px;
    color: #FFF;
    cursor:pointer;
    display: inline-block;
    height: 30px;
    margin-right:15px;
    width: auto;
    padding:0 20px;
    box-sizing: content-box;
}

.fileName {
    font-family: Arial;
    font-size:14px;
}

.upload + .uploadButton {
    height:38px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form action="" method="post" enctype="multipart/form-data">
    <div class="upload">
        <input type="button" class="uploadButton" value="Browse" />
        <input type="file" name="upload" accept="image/*" id="fileUpload" />
        <span class="fileName">Select file..</span>
    </div>
    <input type="button" class="uploadButton" value="Upload File" />
</form>

उम्मीद है की यह मदद करेगा!!!


यहां एक समाधान है, जो चयनित फ़ाइल नाम भी दिखाता है: http://jsfiddle.net/raft9pg0/1/

HTML:

<label for="file-upload" class="custom-file-upload">Chose file</label>
<input id="file-upload" type="file"/>
File: <span id="file-upload-value">-</span>

जे एस:

$(function() {
    $("input:file[id=file-upload]").change(function() {
        $("#file-upload-value").html( $(this).val() );
    });
});

सीएसएस:

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

.custom-file-upload {
      background: #ddd;
      border: 1px solid #aaa;
      border-top: 1px solid #ccc;
      border-left: 1px solid #ccc;
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      border-radius: 3px;
      color: #444;
      display: inline-block;
      font-size: 11px;
      font-weight: bold;
      text-decoration: none;
      text-shadow: 0 1px rgba(255, 255, 255, .75);
      cursor: pointer;
      margin-bottom: 20px;
      line-height: normal;
      padding: 8px 10px; }

यहां हम टाइप फ़ाइल के इनपुट को ट्रिगर करने के लिए एक अवधि का उपयोग करते हैं और हमने बस उस अवधि को अनुकूलित किया है , इसलिए हम इस तरह से किसी भी स्टाइल को जोड़ सकते हैं।

ध्यान दें कि हम दृश्यता के साथ इनपुट टैग का उपयोग करते हैं: छुपा विकल्प और इसे अवधि में ट्रिगर करें।

.attachFileSpan{
color:#2b6dad;
cursor:pointer;
}
.attachFileSpan:hover{
text-decoration: underline;
}
<h3> Customized input of type file </h3>
<input id="myInput" type="file" style="visibility:hidden"/>

        <span title="attach file" class="attachFileSpan" onclick="document.getElementById('myInput').click()">
        Attach file
        </span>

Reference


शायद बहुत सारे चांदनी। लेकिन मुझे यह एफए-बटन के साथ शुद्ध सीएसएस में पसंद है:

.divs {
    position: relative;
    display: inline-block;
    background-color: #fcc;
}

.inputs {
    position:absolute;
    left: 0px;
    height: 100%;
    width: 100%;
    opacity: 0;
    background: #00f;
    z-index:999;
}

.icons {
    position:relative;
}
<div class="divs">
<input type='file' id='image' class="inputs">
<i class="fa fa-image fa-2x icons"></i>
</div>

<div class="divs">
<input type='file' id='book' class="inputs">
<i class="fa fa-book fa-5x icons"></i>
</div>
<br><br><br>
<div class="divs">
<input type='file' id='data' class="inputs">
<i class="fa fa-id-card fa-3x icons"></i>
</div>





<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

पहेली: https://jsfiddle.net/zoutepopcorn/v2zkbpay/1/


सीएसएस बहुत कुछ कर सकता है ... थोड़ा चालबाजी के साथ ...

<div id='wrapper'>
  <input type='file' id='browse'>
</div>

#wrapper {
     width: 93px; /*play with this value */
     height: 28px; /*play with this value */
     background: url('browseBtn.png') 0 0 no-repeat;
     border:none;
     overflow:hidden;
}

#browse{
     margin-left:-145px; /*play with this value */
     opacity:0; /* set to .5 or something so you can better position it as an overlay then back to zero again after you're done */
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
     filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
}

:: संदर्भ :: http://site-o-matic.net/?viewpost=19

-abbey


स्टाइलिंग फ़ाइल इनपुट कुख्यात रूप से कठिन है, क्योंकि अधिकांश ब्राउज़र सीएसएस या जावास्क्रिप्ट से उपस्थिति नहीं बदलेंगे।

यहां तक ​​कि इनपुट का आकार भी पसंद नहीं करेगा:

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

इसके बजाय आपको आकार विशेषता का उपयोग करने की आवश्यकता होगी:

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

किसी भी स्टाइल के लिए उससे अधिक परिष्कृत (उदाहरण के लिए ब्राउज़ बटन के रूप में परिवर्तन) के लिए आपको मूल फ़ाइल इनपुट के शीर्ष पर एक स्टाइल बटन और इनपुट बॉक्स को ओवरले करने के ट्रिक्स्य दृष्टिकोण को देखने की आवश्यकता होगी। www.quirksmode.org/dom/inputfile.html पर पहले से आरएम द्वारा वर्णित आलेख मैंने देखा है सबसे अच्छा है।


केवल सीएसएस

इस बहुत सरल और आसान का प्रयोग करें

एचटीएमएल:

<label>Attach your screenshort</label>
                <input type="file" multiple class="choose">

सीएसएस:

.choose::-webkit-file-upload-button {
    color: white;
    display: inline-block;
    background: #1CB6E0;
    border: none;
    padding: 7px 15px;
    font-weight: 700;
    border-radius: 3px;
    white-space: nowrap;
    cursor: pointer;
    font-size: 10pt;
}

As and mentioned, you can use the clickable behaviour of a stylable label, hiding the less flexible file input element.

<!DOCTYPE html>
<html>
<head>
<title>Custom file input</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>

<body>

<label for="upload-file" class="btn btn-info"> Choose file... </label>
<input id="upload-file" type="file" style="display: none"
onchange="this.nextElementSibling.textContent = this.previousElementSibling.title = this.files[0].name">
<div></div>

</body>
</html>

These answers are nice, and they all work for very specific use cases. That is to say, they are opinionated.

So, here's an answer that assumes nothing, but will work no matter how you modify it. You can change design with css, add javascript to maybe show a file name on change, etc. it will still always work.

कोड:

Here is the core css

.file-input{
  pointer-events: none;
  position: relative;
  overflow: hidden;
}
.file-input > * {
  pointer-events: none;
}
.file-input > input[type="file"]{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  pointer-events: all;
  cursor: pointer;
  height: 100%;
  width: 100%;
}

and the core html:

<div class="file-input">
  <input type="file"/>
</div>

As you can see, we are forcing any pointer event(click) that happens on the .file-input element, or any of its children, to be proxied to the file input. This is because the file input is positioned absolute and will consume the width/height of the container always. You can therefore customize to fit your need. style the wrapper into a button, use some js to display file name on select, etc. nothing will break so long as the above core code remains intact.

जैसा कि आप डेमो में देखेंगे, मैंने div " spanशैली का चयन करें" और .file-inputdiv को स्टाइल करने के लिए अतिरिक्त शैलियों वाला एक वर्ग जोड़ा है । कस्टम फ़ाइल अपलोड तत्व बनाने का इरादा रखने वाले किसी के लिए यह कैनोलिक प्रारंभिक बिंदु होना चाहिए।

डेमो: JSFIDDLE


 <label>
    <input type="file" />
 </label>

आप इनपुट के लिए लेबल के अंदर अपना इनपुट प्रकार = "फ़ाइल" लपेट सकते हैं। लेबल को स्टाइल करें हालांकि आप डिस्प्ले के साथ इनपुट को छिपाएं और छुपाएं: कोई भी नहीं;







file-io