linkedin facebook linkedin facebook nod32

Html da faylni tanlash input type=file nomini o`zgartirish

Muallif: Mengliyev Sh.

Qo`shilgan sana: 2017-01-17

Html da faylni tanlash input type=file nomini o`zgartirish

HTML forma tuzilishi bilan boshlanadi unda fayl nomi “Обзор” ni nomini o`zgartirishni ko`rib chiqamiz buning uchun quyida keltirilgan html kodni index.html deb nomlab olamiz.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Faylni tanlash tugmachasining nomini o`zgartirish</title>

<style>
.file-upload {
position: relative; /* Berilgan element ichidagi joylashtirish imkoniyatini beradi */
overflow: hidden; /* Hamma narsa - yashir */
width: 30%; /* Fayl tanlash tugmasi kengligini belgilab beradi*/
height: 20px; /* Fayl tanlash tugmasi balandligini belgilab beradi */
background: rgba(44, 57, 212, 1); /* Fayl tanlash tugmasi rangini belgilab beradi */
border-radius: 5px; /* Fayl tanlash tugmasi 4-tarafdan 5 radiusli burchakni o`zgartiradi */
padding: 8px 4px; ; /* Fayl tanlash tugmasi yozuviga 8 piksel yuqoridan 4 piksel pastdan o`zgartiradi */
color: rgba(21, 20, 20, 1); /* Fayl tanlash tugmasi yozuvi rangini belgilab beradi */
text-align: center; /* Fayl tanlash tugmasi yozuvini o`rtaga o`zgartiradi o`zgartiradi */
}
.file-upload:hover {
background: rgba(224, 148, 148, 1); /* Fayl tanlash tugmasiga sichqonchani olib borganda rangini xarakat sifatida o`zgartiradi */
}
.file-upload input[type="file"]{
display: none; /* Input File ni tipini Real yashirish misol uchun Обзор so`zini */
.file-upload label {
     /* label- yuklash birligi maydoni.file-upload */
     display: block;
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     cursor: pointer;
}
.file-upload span {
     line-height: 36px
}
</style>

</head>
<body>
<div class="file-upload">
<label>
<input type="file" name="file">
<span>Faylni tanlang</span>
</label>
</div>

</body>
</html>


1234 marta o`qildi.

Parol:
Eslab qolish.


Ro`yhatdan o`tish

testing

+998915878681

Siz o`z maxsulotingizni 3D reklama ko`rinishda bo`lishini xohlaysizmi? Unda xamkorlik qilamiz.

3D Reklama


Рейтинг@Mail.ru
Рейтинг@Mail.ru

Besucherzahler
счетчик посещений