Bootstrap 4 ga tegishli maxsus kirish fayli ko'rsatilmaydi

Bootstrap 4da Maxsus kirish faylini foydalanganda, kiritishni o'zgartirmang va browse tugmachasini ko'rmang.

file-browser


.kustom-fayl

position: relative;
display: inline-block;
max-width: 100%;
height: 2.5rem;
cursor: pointer;

.kustom-fayl-kirish

min-width: 14rem;
max-width: 100%;
margin: 0;
filter: alpha(opacity=0);
opacity: 0;

.kustom-fayl-nazorat

position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 5;
height: 2.5rem;
padding: .5rem 1rem;
line-height: 1.5;
color: #555;
user-select: none;
background-color: #fff;
border: 1px solid #ddd;
border-radius: .25rem;

enter image description here

6
@masud_moni Ha, men barcha CSS buyruqlari va fayllarini qidiraman.
qo'shib qo'ydi muallif Soheil Alizadeh, manba
@masud_moni Ha, men barcha CSS buyruqlari va fayllarini qidiraman.
qo'shib qo'ydi muallif Soheil Alizadeh, manba
@masud_moni Ha, men barcha CSS buyruqlari va fayllarini qidiraman.
qo'shib qo'ydi muallif Soheil Alizadeh, manba
@masud_moni Yo'q, bu element skriptga ehtiyoj yo'q.
qo'shib qo'ydi muallif Soheil Alizadeh, manba
@masud_moni Yo'q, bu element skriptga ehtiyoj yo'q.
qo'shib qo'ydi muallif Soheil Alizadeh, manba
@masud_moni Yo'q, bu element skriptga ehtiyoj yo'q.
qo'shib qo'ydi muallif Soheil Alizadeh, manba
Ushbu element uchun biron bir skript kodini ishlatdingizmi?
qo'shib qo'ydi muallif masud_moni, manba
Bootstrap'a ko'ra, u butunlay CSS-ga asoslangan. CSS fayli integratsiyasi bilan bog'liq ba'zi muammolar bo'lishi mumkin. Siz buni yaxshilab tekshirib qo'ydingizmi?
qo'shib qo'ydi muallif masud_moni, manba
Ushbu element uchun biron bir skript kodini ishlatdingizmi?
qo'shib qo'ydi muallif masud_moni, manba
Ushbu element uchun biron bir skript kodini ishlatdingizmi?
qo'shib qo'ydi muallif masud_moni, manba
Bootstrap'a ko'ra, u butunlay CSS-ga asoslangan. CSS fayli integratsiyasi bilan bog'liq ba'zi muammolar bo'lishi mumkin. Siz buni yaxshilab tekshirib qo'ydingizmi?
qo'shib qo'ydi muallif masud_moni, manba

11 javoblar

Hujjatlar hujjatning tilini belgilashingiz kerakligini bildiradi. Masalan, faqat sozlash:


agar u @masud_moni kabi javob bermasa, siz "eng" o'rniga boshqa til ko'rsatgansiz.

12
qo'shib qo'ydi
bu to'g'ri javob bo'lishi kerak +1
qo'shib qo'ydi muallif Ismail Farooq, manba
O'zingizning davlatlaringizdan foydalanganda nima bo'lishidan qat'iy nazar "en" o'rniga? Bu ishlamayaptimi? Mening javobim no-ingliz tilidagi sahifalar uchun "to'g'ri" bo'lmasligi mumkin bo'lsa-da, shuning uchun siz o'zingizning davlatlaringizdan emas, balki sizning qiymatingizdan foydalanishingiz kerakligini maslahat beraman.
qo'shib qo'ydi muallif Stuart, manba
Bu hali men uchun kodni 4.0.0-beta.2 dan foydalangan holda bajarish kabi ko'rinmaydi
qo'shib qo'ydi muallif FastTrack, manba
@IsmailFarooq, ingliz tilidagi sahifalar uchun to'g'ri javob emas ... Men quyidagi rafa226 javobni afzal ko'raman
qo'shib qo'ydi muallif JavierFuentes, manba

Men tekshirganimdagina - siz oldin va: pseudoelements so'ng - joylashtirishingiz kerak - u ishlaydi.

.custom-file-control:before{
  content: "Browse";
}
.custom-file-control:after{
  content: "Add files..";
}

http://codepen.io/powaznypowazny/pen/jBqzgR

11
qo'shib qo'ydi
Bu doc ​​ning ma'lumotlariga ko'ra to'g'ri yo'l emas. Qo'shimcha ma'lumot uchun javobingizni ko'rsating. Bu ishni bajarishi mumkin bo'lsa-da, Bootstrap-ga o'rnatilgan ba'zi funksiyalarni chetlab o'tadi.
qo'shib qo'ydi muallif Stuart, manba
savolni ingliz tilida bo'lmagan sahifalar va filename ta'qib qilish bilan hal qilish uchun mening javobim ni ko'rishingiz mumkin
qo'shib qo'ydi muallif JavierFuentes, manba

Men tekshirganimdagina - siz oldin va: pseudoelements so'ng - joylashtirishingiz kerak - u ishlaydi.

.custom-file-control:before{
  content: "Browse";
}
.custom-file-control:after{
  content: "Add files..";
}

http://codepen.io/powaznypowazny/pen/jBqzgR

11
qo'shib qo'ydi
Bu doc ​​ning ma'lumotlariga ko'ra to'g'ri yo'l emas. Qo'shimcha ma'lumot uchun javobingizni ko'rsating. Bu ishni bajarishi mumkin bo'lsa-da, Bootstrap-ga o'rnatilgan ba'zi funksiyalarni chetlab o'tadi.
qo'shib qo'ydi muallif Stuart, manba
savolni ingliz tilida bo'lmagan sahifalar va filename ta'qib qilish bilan hal qilish uchun mening javobim ni ko'rishingiz mumkin
qo'shib qo'ydi muallif JavierFuentes, manba

Men tekshirganimdagina - siz oldin va: pseudoelements so'ng - joylashtirishingiz kerak - u ishlaydi.

.custom-file-control:before{
  content: "Browse";
}
.custom-file-control:after{
  content: "Add files..";
}

http://codepen.io/powaznypowazny/pen/jBqzgR

11
qo'shib qo'ydi
Bu doc ​​ning ma'lumotlariga ko'ra to'g'ri yo'l emas. Qo'shimcha ma'lumot uchun javobingizni ko'rsating. Bu ishni bajarishi mumkin bo'lsa-da, Bootstrap-ga o'rnatilgan ba'zi funksiyalarni chetlab o'tadi.
qo'shib qo'ydi muallif Stuart, manba
savolni ingliz tilida bo'lmagan sahifalar va filename ta'qib qilish bilan hal qilish uchun mening javobim ni ko'rishingiz mumkin
qo'shib qo'ydi muallif JavierFuentes, manba

Quyidagi kodni ishlatib ko'ring. Umid qilamanki muammoingizni hal qilmoqchiman. Bootstrap sahifasidagi kod misoli ostida beriladi.

$custom-file-text: (
    placeholder: (
    en: "Choose file...",
    es: "Seleccionar archivo..."
    ),
    button-label: (
        en: "Browse",
        es: "Navegar"
    )
);
2
qo'shib qo'ydi
@JavierFuentes Iltimos, bootstrap hujjatlarini tekshiring. Siz u erda topasiz. Men ushbu hujjatga qaraganimda topdim
qo'shib qo'ydi muallif masud_moni, manba
Ushbu kodni qaerga qo'yishimiz kerak? CSS? js? html?
qo'shib qo'ydi muallif JavierFuentes, manba

Quyidagi kodni ishlatib ko'ring. Umid qilamanki muammoingizni hal qilmoqchiman. Bootstrap sahifasidagi kod misoli ostida beriladi.

$custom-file-text: (
    placeholder: (
    en: "Choose file...",
    es: "Seleccionar archivo..."
    ),
    button-label: (
        en: "Browse",
        es: "Navegar"
    )
);
2
qo'shib qo'ydi
@JavierFuentes Iltimos, bootstrap hujjatlarini tekshiring. Siz u erda topasiz. Men ushbu hujjatga qaraganimda topdim
qo'shib qo'ydi muallif masud_moni, manba
Ushbu kodni qaerga qo'yishimiz kerak? CSS? js? html?
qo'shib qo'ydi muallif JavierFuentes, manba

To show custom-file-control's placeholder and its button caption in non english pages you must add to your CSS .custom-file-control:before and .custom-file-control:empty::after as in this snippet.

Ushbu bosqichda tanlovdan so'ng maxsus boshqaruv ichidagi faylni olish uchun ochiq-oydin chiqaring . Bu erda ko'rsatilgan onchange tadbirini hal qilishni qo'llashingiz mumkin.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

/* Valid for any language */
.custom-file-control:before {
        content: "Search";
}
.custom-file-control:empty::after {
        content: "Choose a file...";
}

/* Specific for spanish language */
.custom-file-control:lang(es)::before {
        content : "Buscar";
}
.custom-file-control:lang(es):empty::after {
        content : "Seleccionar un fichero...";
}
<!DOCTYPE HTML>

<head>
        <title>Test custom-file-control</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</head>
<body>
        <div class="mt-5 ml-5">
          
        </div>
</body>
</html>
</div> </div>
2
qo'shib qo'ydi

To show custom-file-control's placeholder and its button caption in non english pages you must add to your CSS .custom-file-control:before and .custom-file-control:empty::after as in this snippet.

Ushbu bosqichda tanlovdan so'ng maxsus boshqaruv ichidagi faylni olish uchun ochiq-oydin chiqaring . Bu erda ko'rsatilgan onchange tadbirini hal qilishni qo'llashingiz mumkin.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

/* Valid for any language */
.custom-file-control:before {
        content: "Search";
}
.custom-file-control:empty::after {
        content: "Choose a file...";
}

/* Specific for spanish language */
.custom-file-control:lang(es)::before {
        content : "Buscar";
}
.custom-file-control:lang(es):empty::after {
        content : "Seleccionar un fichero...";
}
<!DOCTYPE HTML>

<head>
        <title>Test custom-file-control</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</head>
<body>
        <div class="mt-5 ml-5">
          
        </div>
</body>
</html>
</div> </div>
2
qo'shib qo'ydi

Tugma haqida sizning .css dosyaning tilini tanlashingiz mumkin va u paydo bo'ladi:

.custom-file-control:lang(fr)::before{
    content:"PARCOURIR";
}
.custom-file-control:lang(en)::before{
    content:"BROWSE";
}
2
qo'shib qo'ydi

Men bir xil muammolarga duch keldim, bu erga yechim topdim, uni topolmadim, shuning uchun uni qazib olishni davom ettirdim: buning uchun to'g'ri yo'l - bu sinfdagi maxsus faylni va uning ichida kirish va yorliqni topish emas, balki teg ichiga kiritish.

<div class="custom-file">
    <input type="file" id="Image" class="custom-file-input">    
    
</div>
0
qo'shib qo'ydi

Men bir xil muammolarga duch keldim, bu erga yechim topdim, uni topolmadim, shuning uchun uni qazib olishni davom ettirdim: buning uchun to'g'ri yo'l - bu sinfdagi maxsus faylni va uning ichida kirish va yorliqni topish emas, balki teg ichiga kiritish.

<div class="custom-file">
    <input type="file" id="Image" class="custom-file-input">    
    
</div>
0
qo'shib qo'ydi