Javascript-selaimien välinen tyylitiedosto. Input type="file" -tyylin selainten välinen tyyli CSS:n avulla. Mahdolliset virheet tässä menetelmässä

Luulen, että monet, kuten minä, eivät ole täysin tyytyväisiä vakionäkymä tiedostojen latauskentät. Sen lisäksi, että se on karkeasti sanottuna ruma, se on myös eri selaimet näyttää erilaiselta.

Tehtävämme on tehdä alasta houkuttelevampi ja tietysti yhtenäistää se.

Ongelman ratkaisemisessa auttaa meitä etikettitunniste, joka yhdistää tekstin ja muut elementit lomakeelementteihin (meissä tapauksessa painikkeella), jQuery (joka auttaa saamaan tarvittavat tiedot valituista tiedostoista - nimet ja niiden pääte) ja ylimääräinen syöttökenttä, johon tallennamme suoraan tietomme tiedostoista.

1. Ensimmäinen asia, jonka tarvitset, on itse tiedoston valintakenttä. Sen koodi on seuraava:

Arvostelu...

Ja kaikki näyttää toistaiseksi tältä:

Kuten koodissa huomasit, estämme lisätekstikentän, jotta käyttäjä ei voi jatkossa vaikuttaa siihen, koska näytämme siinä tiedot tiedostosta.

2. Kirjoitamme nyt pienen skriptin, joka näyttää meille tietoja tiedostosta:

$(dokumentti).ready(function() ( $(".main_input_file").change(function() ( var f_name = ; for (muuttuja i = 0; i< $(this).get(0).files.length; ++i) { f_name.push(" " + $(this).get(0).files[i].name); } $("#f_name").val(f_name.join(", ")); }); });

On suositeltavaa lisätä koodi ennen sulkevaa tagia. Ja katsotaan mitä saamme:

Loistava! Juuri mitä tarvitsemme. Nyt ei jää muuta kuin piilottaa vakiotiedostojen valintakenttä ja kampata luomamme lomake.

3. Tätä varten kirjoitetaan pieni CSS-tyyli:

Main_input_file ( näyttö: ei mitään; ) .upload_form div ( leveys: 100px; korkeus: 32px; tausta: #3498db; reunuksen säde: 4px; väri: #fff; tekstin tasaus: keskellä; rivin korkeus: 32px; font-family : arial: font-size: 14px näyttö: inline-block: top: .upload_form div:hover ( tausta: #2980b9; kursori: osoitin; ) #f_name ( tausta: läpinäkyvä; näyttö :; inline-block: korkeus: 30px;

Tallennamme tämän kaiken ja ihailemme tulosta:

Minusta se on erittäin hyvä.

Mahdollisia virheitä tämän menetelmän toiminnassa

Niistä niin sanotuista ongelmista, joihin tämä menetelmä ei välttämättä toimi, on puute jQuery-kirjastot(Erittäin yleinen ongelma staattiset sivustot). Ratkaistu seuraavalla tavalla.

Sisällytä kirjasto ennen sulkevaa tunnistetta:

Haluan korostaa, että toisin kuin muilla sivustoilla olevilla vastaavilla ohjeilla, omani on yksinkertaisempi ja voi toimia myös useiden tiedostojen kanssa kentässäsi (tässä tapauksessa kaikki valitut kentässä olevat tiedostot merkitään pilkuilla erotettuina).

Vuoteen 1998 mennessä, kun CSS Level 2 julkaistiin, kaikki yleisimmät selaimet tukivat jo lomakeelementtejä. CSS 2 -spesifikaatio ei ratkaissut esitysongelmaa. Koska nämä elementit ovat osa käyttöliittymää, spesifikaation laatijat päättivät luovuttaa ne visuaalinen esitys selainkehittäjien armoilla.

Vuodesta toiseen riittämättömän yksityiskohtaiset määritykset pakottivat verkkokehittäjät kokeilemaan yrityksiä tuoda elementtien, kuten input , select , fieldset , legenda ja textarea, esitys eri selaimissa "yhteiseen nimittäjään". Tässä artikkelissa tarkastellaan joitain CSS-tekniikoita, joita verkkokehittäjät käyttävät lomakeelementtien visuaalisen esityksen standardointiin.

Testit Roger Johansson

Ensin vuonna 2004 ja sitten vuonna 2007 Roger Johansson loi kattavan testisarjan testatakseen CSS-tyylien soveltamista muotoelementteihin. Näiden testien tulokset, jotka löytyvät hänen artikkelistaan ​​"On Styling Form Elements with CSS", johtivat pettymykseen, jonka Johansson ilmaisi seuraavin sanoin:

Mitä tämä kokeilu sitten osoittaa? Kuten sanoin, se osoittaa sen CSS:n avulla muotoelementtien muotoiluun, jotta ne saadaan yhtenäisiksi eri selaimissa ja muissa selaimissa eri alustoilla mahdotonta. Se osoittaa myös, että useimmat selaimet jättävät huomioimatta monet lomakeelementteihin käytetyt CSS-ominaisuudet.

Huolimatta näiden johtopäätösten kiistattomasta pätevyydestä, verkkokehittäjät jatkoivat aktiivisesti CSS-tyylien soveltamisen testaamista elementtien muodostamiseen löytääkseen selaimen välisen esityksensä pyhän maljan tai ainakin kohtuullisen kompromissin selaimen käyttämien tyylien välillä. oletusarvot ja kehittäjän määrittämät.

Oletusmalli

CSS 2.1 -spesifikaatio määrittelee ehdotetussa HTML4:n oletustyylitaulukossa, että elementit, kuten tekstialue , syöttö ja valinta, ovat inline-block:

tekstialue , syöttö , valitse ( näyttö : inline-block; )

Lomake- ja kenttäjoukon elementit puolestaan ​​ovat lohkotason:

kenttäjoukko, lomake (näyttö: lohko;)

CSS-määrityksen ehdottama oletusmallin kuvaus rajoittuu tähän. Kaikki muut lomakeelementtien visuaaliset näkökohdat riippuvat selaimen oletustyylisivusta. Luettelosäännöt tarkoittavat kuitenkin seuraavaa:

Inline-lohkoelementtejä voidaan muotoilla rivimallilla. Sen avulla voit käyttää CSS-ominaisuuksia, kuten linjan korkeutta ja pystytasausta, ohjaamaan lohkon korkeutta ja sen pystysuuntaista kohdistusta. Lisäksi osoittaa ulkoinen ja pehmuste lohkon ominaisuuksien marginaalia ja täyttöä voidaan käyttää. Sisäiset lohkoelementit tukevat leveyttä ja korkeutta, koska ne käyttävät lohkon muotoilumallia.

Lohkoelementit voidaan muotoilla käyttämällä tuttua lohko malli. Ongelmia syntyy kuitenkin kenttäjoukon ja selitteen elementtien kanssa, koska selite on täysin riippuvainen selaimen oletustyyleistä.

Miten verkkokehittäjät ratkaisevat nämä ongelmat?

Mitat

Verkkokehittäjät huomasivat nopeasti, että selaimet käyttäytyivät oudosti käytettäessä sisäisiä lohkoelementtejä kun on kyse mittojen nimenomaisesta määrittämisestä. Korkeuden määrittäminen johtaa usein odottamattomiin tuloksiin:

syöttö, valitse (leveys: 120px; korkeus: 32px;)

Kehittäjät yrittivät ratkaista tämän ongelman muuttamalla nämä elementit lohkoelementeiksi:

syöttö, valitse (leveys: 120px; korkeus: 32px; näyttö: lohko;)

Toimii vain textarean kanssa. Vakioratkaisut Tämä ongelma johtuu fontin koon ja täyteominaisuuksien käyttämisestä korkeuden sijaan.

Lomakeelementit eivät peri kirjasintyyppiä ja kirjasinkokoa, joten sinun on ensin määritettävä ne:

input , select ( leveys : 120px ; font : 1em Arial, sans-serif; )

Kun olet määrittänyt kirjasimen, voit asettaa täytön lisäämään elementtilohkoon täyttöä:

syöttö, valitse (leveys: 120px; fontti: 1em Arial, sans-serif; täyte: 3px 6px;)

Input- ja textarea-elementeillä on selaimen tyylisivuissa määritetty reuna. Normalisoidaan:

syöttö , syöttö , tekstialue ( reunus : 1px kiinteä #cc ; )

Selaimet lisäävät ylimääräisiä täyttöelementtejä tyyppipainikkeen ja lähetyksen syöttöelementteihin. Yleinen käytäntö niiden normalisoimiseksi on:

syöttö, syöttö (täyte: 2px;)

Tämän tekniikan ongelmana on, että selaimet muun muassa soveltavat selainkohtaisia ​​ominaisuuksia näihin elementteihin, eikä täyttö aina pysty normalisoimaan niitä. Esimerkiksi Webkit-moottoria käyttävissä selaimissa saatat löytää seuraavan:

input , input , input , input ::-webkit-file-upload-button , button ( -webkit-box-align : center; text-align : center; kursori : oletus; väri : buttontext; täyte : 2px 6px 3px; border : 2px painikekuva: taustaväri: laatikon koko: painike;

pehmustetta käytetään myös kenttäjoukko- ja seliteelementeissä, mutta se tuottaa erilaisia ​​tuloksia:

• Arvon asettaminen pehmusteominaisuudet elementin kenttäjoukko 0 oletuksena nollaa seliteelementin sisennyksen joissakin selaimissa (mutta ei IE:ssä).
• Seliteelementin täyttöominaisuuden asettaminen 0:ksi aiheuttaa sen kutistumisen.

Valitse ja syöttää valintaruudulla ja radiotyypeillä vain:

• fonttiperhe
• Fonttikoko
• leveys (valittavissa),
• pehmuste.

Muiden ominaisuuksien käyttäminen näihin elementteihin johtaa usein epäjohdonmukaisiin tuloksiin eri selaimet.

Tasaus

Lomakeelementit voidaan kohdistaa vaaka- ja pystysuunnassa. Ne voivat sijaita yhdellä rivillä tai lohkojen ryhmänä toistensa alapuolella. Voit kohdistaa ne samalle riville käyttämällä jompaakumpaa kahdesta lähestymistavasta:

Käytä kelluketta

Käytä viivalohkomallia joissakin elementeissä.

Käytettäessä kelluketta elementeistä tulee automaattisesti lohkoelementtejä. Tämä tarkoittaa, että nämä lomakeelementit ovat nyt yhdeksän kelluvan elementin säännön alaisia.

Lomakeelementit voidaan kohdistaa pysty- ja vaakasuunnassa.

Uimuria käytettäessä suurin ongelma on oikea pystysuuntaus suhteessa nykyinen linja. Tämä tehdään yleensä marginaalilla tai täytteellä:

syöttö , valitse ( leveys : 120px ; float : vasen ; marginaali yläreuna : 0,4 em ; )

Tämä lähestymistapa toimii, kun sinun ei tarvitse määrittää lohkojen kohdistusta suhteessa tekstiin, kuten tarran sisältöön. Jos tämä on tarpeen, voit käyttää suhteellista sijoittelua, täyttöä ja marginaalia elementeissä, jotka sisältävät vain tekstiä:

etiketti ( kellua : vasen ; pehmuste yläosa : 0,4 em ; leveys : 5 em ; marginaali oikea : 1 em ; )

Toinen ongelma ilmenee painikkeissa. Jos sinulla on painike, joka on suurempi kuin muut elementit, voit asettaa sen pystysuuntaisen kohdistuksen käyttämällä suhteellista sijoittelua:

syöte ( kellua : vasen ; leveys : 90 pikseliä ; sijainti : suhteellinen ; ylhäällä : 0,4 em ; )

Toista tekniikkaa suhteellisella paikannuksella voidaan käyttää syöttämiseen valintaruudun ja radiotyyppien kanssa. Suhteellista paikannusta voidaan jopa käyttää normalisoimaan kenttäjoukon elementin selite-elementin vasen täyttö. Ainoa ero on, että sinun on käytettävä vasenta ominaisuutta yläominaisuuden sijasta.

Kun käytät upotettua ja upotettua lohkomallia elementtien tasaamiseen pystysuunnassa, voit käyttää vertikaalinen tasausominaisuus:

etiketti , syöttö ( pystysuora tasaus : keskellä; marginaali oikea : 1em ; )

Tätä ominaisuutta voi olla kätevä käyttää yhdessä rivinkorkeuden kanssa. On tärkeää huomata, että sinun on sovellettava tätä ominaisuutta pääelementtiin. Jos käytät tätä ominaisuutta suoraan lomakeelementteihin, se vaikuttaa niiden korkeutta laskettaessa:

.form-row ( rivin korkeus : 1,4 ; )

Selkeä korkeusmääritys pääelementti Se on myös tehokas, kun sitä käytetään yhdessä saman rivinkorkeusarvon kanssa:

.form-row (linjan korkeus: 1,8; korkeus: 1,8 em;)

Kun käytät inline- tai line-block-mallia, voit myös käyttää text-align-ominaisuus Pääelementti tasaa elementit oikealle, vasemmalle tai keskelle.

Tiedostonvalintaelementtien outoja ominaisuuksia

- Tämä erikoistapaus. Turvallisuussyistä tämän tyyppisten elementtien tulee aina olla näkyvissä ja tunnistettavissa selaimessa. Tämä tarkoittaa, että selaimet jättävät tietoisesti huomiotta jotkin tyylit (esimerkiksi elementin näkyvyyteen liittyvät tyylit) ja pyrkivät pakottamaan omilla tyylisivuillaan kuvatun esityksen.

On syytä huomata, että oletusasettelu vaihtelee selaimen välillä: jotkut selaimet näyttävät vain yhden painikkeen, kun taas toiset lisäävät tekstikentän osoittamaan polun ladattavaan tiedostoon.

Verkkokehittäjät löysivät kuitenkin nopeasti tavan voittaa nämä rajoitukset. Ensin he laittavat syöttökentän säilöön:

Sitten he piilottivat syöttöelementin opasiteettiominaisuudet ja säilössä käytetyt tyylit:

.upload ( leveys : 157px ; korkeus : 57px ; tausta : url (upload.png) ei toistoa; ylivuoto : piilotettu; ) .upload input ( näyttö : block !tärkeää ; leveys : 157px !tärkeää ; korkeus : 57px ; ! peittävyys : 0 !tärkeää : overflow : piilotettu!tärkeää )

Huomaa!tärkeää . Tämä on suositeltu tapa ohittaa oletusselaimen tyylit.

Johtopäätös

Lomakeelementtien esittämisen täysi hallinta ei ole mahdollista CSS-spesifikaatioiden epävarmuuden ja selainten käyttämien oletustyylien vuoksi. Joitakin yleisiä tekniikoita käyttämällä voit kuitenkin vähentää (mutta et poistaa) eroja elementtien suunnittelussa.

Alkuperäinen artikkeli: The Problem Of CSS Form Elements Artikkelin lukija: , visitorFM , Anton Khlynovskiy , Igor Adamenko

3,9/5

Hei. Tänään haluan kertoa sinulle, kuinka voit muuttua ulkomuoto tiedoston syöttö, miten muotoilet syöttötiedoston suunnitteluasi sopivaksi, miten muotoilet .

Tarpeeksi avainsanoja=). Luulen, että ymmärrät pointin.

Tosiasia on, että tulojen ulkonäön muuttaminen ei yleensä aiheuta vaikeuksia, mutta tämäntyyppinen syöttö eroaa muista. Ensinnäkin tämä johtuu turvallisuudesta ja toiseksi siitä, että jokainen selain näyttää tämän elementin eri tavalla, ja tähän on lähes mahdotonta vaikuttaa.

Tässä artikkelissa kerrotaan, kuinka saat tarvitsemasi syöttötiedoston ulkonäön.

Katsotaanpa ensin, kuinka tiedostosyötteet näytetään käyttämättä tyylejä eri selaimissa.

Seurauksena on, että kaikkialla paitsi safarilla näemme osoitteen alun, jolla ei ole juuri mitään semanttista merkitystä. Epäilen, ettei kukaan tiennyt tästä, mutta vain Applen kaverit kiinnittivät huomiota tähän tyhmyyteen ja mahdollistivat välittömästi paitsi valitun tiedoston nimen myös kuvakkeen. Aiomme ottaa käyttöön saman tiedostonsyöttötoiminnon kaikille selaimille.

Mutta ensin tutustutaan ongelmaan.
1. JS:ää käytettäessä emme voi simuloida napsautusta tällaiselle syötteelle. Tässä on mitä DOM-määrittelyn pyhät kirjoitukset sanovat siitä:

klikkaus
Simuloi hiiren napsautusta. INPUT-elementeille, joiden type-attribuutilla on jokin seuraavista arvoista: "button", "checkbox", "radio", "reset" tai "submit".
Ei parametreja
Ei palautusarvoa
Ei poikkeuksia

Toisin sanoen napsautusmenetelmää käyttämällä voimme simuloida napsautuksen melkein kaikentyyppisillä syötteillä, mutta emme tiedostosyötteellä. Tämä tehdään asiakkaan tietokoneen suojaamiseksi: muuten sivuston omistaja voi helposti vastaanottaa kaikki tiedostot asiakkaan tietokoneelta. Vaikka toisaalta, kun sitä napsautetaan, vain tiedoston valintaikkuna avautuu. Tavalla tai toisella Firefox-kehittäjäkeskuksessa tämä tosiasia on merkitty virheeksi.

Ratkaisu on olemassa, emmekä keksineet pyörää, vaan viritimme sen. Kaikki syötteiden tyylittäjät noudattavat samaa kaavaa: luodaan syöte, jonka läpinäkyvyys on nolla, ja se sijoitetaan tiedostonvalintapainiketta edustavan painikkeen tai kuvan päälle.

Suurin vaikeus piilee seuraavassa ongelmassa.

2. Emme voi vapaasti vaikuttaa "tarkistus"-painikkeiden kokoon säätääksemme tuloa päällekkäisen kuvan koon mukaan. Firefoxissa emme voi muuttaa tiedostosyötteen ulkonäköä ollenkaan. css:n avulla(paitsi korkeus). Eli tehtävänä on määrittää optimaalinen koko päällekkäinen kuva niin, että pienintä määrää pikseleitä ei voi napsauttaa, eivätkä tyhjät alueet reagoi napsautuksiin.

Katsotaanpa klikattavia alueita ja niiden kokoja eri selaimissa.