Campi <input> e Safari

[Sergio P.]

Ho notato che i campi <input> in Safari vengono sempre renderizzati allo stesso modo anche se con i CSS vengono tolti i bordi.

E sopratutto all'onFocus si evidenziano in azzurro.

C'è modo di ovviare a questo problema magari con qualche proprietà CSS proprietaria solo di Safari?

Ciao.

S.

P.S.: Praticamente come avviene nel form di ricerca in alto a destra di questo forum o anche del sito Apple.

[grigio60]

normalmente il rendering dei campi delle form (campi di input, menu a tendina ecc) può essere controllato in modo molto limitato dalle css perché in realtà questi elementi non vengono gestiti tanto dal browser quanto dalla GUI nativa del sistema operativo stesso: è esattamente questo il motivo per cui la stessa form html con per esempio checkbox e menu a tendina, a parità di codice html e di css, sotto windows ha l'apparenza dei menu windows, sotto OS X ha la tipica struttura dei menu di OS X, idem per linux e così via.

di suo il browser ci mette la possibilità di controllare qualche elemento secondario, tipo il colore di sfondo del campo input (basta un normale background-color), lasciando il resto appunto alla GUI del sistema operativo. e su questo sottoinsieme di proprietà ogni browser si comporta a modo suo.

[Sergio P.]

Quello che dici è verissimo. Anche se poi i comportamenti sono molto diversi in base a sitema/browser.

Sicuramente sotto Windows i comportamenti sono più "uniformi". Nel senso che sia Firefox che Explorer fanno prendere ai campi input le sembianze della GUI. E se si interviene con i CSS non hanno difficoltà a cambiare.

Su OSX Firefox invece da ai campi input sembianze "anonime" non conformi però alla GUI, ma comunque gestibili con CSS.

Discorso a parte lo ha Safari, che su Mac giustamente mantiene le sembianze della GUI mentre su Windows ha un suo stile simile alla GUI di OSX. Ma in tutti e due i casi i CSS non lavorano bene.

Però il campo INPUT di ricerca in alto a destra di questo forum (che è simile a quello del sito Apple), dimostra che in qualche modo si può intervenire. Ma non sono riuscito a capire come...

[Sergio P.]

Ho scoperto come funziona il campo SEARCH del sito Apple (e anche di ItaliaMac).

Utilizzano l'attributo type="search" nel campo <input>.

Ovviamente è un attributo fuori da qualsiasi standard, ma Safari lo interpreta graficamente come un campo con i bordi arrotondati (come si vede anche in questo forum).

Per cancellare i bordi da un campo <input> su Safari per Mac, nulla di nuovo ancora (Safari per Win invece accetta la direttiva CSS border:0).