[CSS] Posizionare casella di ricerca

Shyson

Utente Attivo
19 Ago 2012
1.179
1
38
Nel menù ho messo la casella di ricerca in fondo
quando però rimpicciolisco la pagina, la casella ovviamente va sotto, ma rimane troppo staccata dalle voci superiori

Schermata 2020-04-13 alle 08.38.33.png


Se però la stringo di più fino a far apparire l'ultima voce, la casella si posiziona correttamente nel di grigietto

Schermata 2020-04-13 alle 08.38.43.png


CSS della casella

CSS:
/* Box casella di ricerca */
.search-field {
    width: 175px;
    height: 35px;
    font-size: 0.9em;
    font-style: normal;
    padding-top: 10px;
    margin-left: -1px !important;
    border-radius: 6px;
}

/* Casella di ricerca */
.search-form {
    background: #fff;
    height: 35px;
    border-radius: 6px;
    border: 1px solid #dfdee1 !important;
}

/* Pulsante casella di ricerca */
.search-submit {
    width: 40px;
    height: 35px;
    border-left: 1px solid #dfdee1 !important;
    border-radius: 0 5px 5px 0;
}
.search-submit:hover { background: #ffd479 !important; }

/* Icona nel pulsante cerca */
.icon-search {
    width: 18px !important;
    height: 18px !important;
    margin: 0 auto !important;
    position: absolute;
    left: 12px;
    top: 10px;
}
 
Ultima modifica di un moderatore:
Discussioni simili
Autore Titolo Forum Risposte Data
N Aiuto CSS, come posizionare un'immagine centralmente HTML e CSS 4
G Input checkbox in CSS HTML e CSS 0
G classe CSS sovrascritta HTML e CSS 2
G file CSS contenente variabili HTML e CSS 1
R jquery che cambia css di un elemento non mi funziona sulla pagina caricata da ajax Ajax 5
L problema collegamento file css con html HTML e CSS 1
M CSS "puro" HTML e CSS 0
D Aiuto CSS in ELEMENTOR - Cambiare un testo CMS (Content Management System) 0
Z Google Fonts CSS tra desktop e responsive HTML e CSS 1
Z Slide show CSS HTML e CSS 1
Z CSS Slideshow senza JS e JQUERY HTML e CSS 2
Z CSS Slideshow senza JS e JQUERY HTML e CSS 2
S problema con css bootstrap3 HTML e CSS 4
L Sovrascrivere CSS iframe su dominio diverso WordPress 0
E CSS non riconosciuto PHP 1
Shyson Centrare box css HTML e CSS 2
R Primo script in PHP / CSS PHP 4
S non funzionano alcuni effetti (bottone futuristico creato con css) HTML e CSS 1
V [CSS] Uso degli id HTML e CSS 2
I creazione stile css HTML e CSS 3
M [Javascript] Canvas js css Javascript 1
M Programmazione web HTML, CSS e JavaScript Offerte e Richieste di Lavoro e/o Collaborazione 6
P [WordPress] Messaggio di errore in file style.css WordPress 0
D Aggiungere file .css esterno su Android HTML e CSS 4
F [JavaScript] Ottenere il CSS dopo transform: scale() e transform-origin Javascript 0
StephenSoftware Flexbox: definizione nel CSS HTML e CSS 4
Tommy03 Variabile PHP per impostare una proprietà CSS PHP 2
R javascript lettura css cross-browser Javascript 1
U [WordPress] [CSS] Come faccio a spostare più in basso lo slider WordPress 0
L [Javascript]Alternativa al position:sticky nel CSS Javascript 0
A Strumenti per filtrare il css HTML e CSS 1
S Il Css non si aggiorna, svuotata cache HTML e CSS 6
N [css] :active HTML e CSS 1
Shyson [WordPress] [CSS] Formattare casella WordPress 0
Shyson [CSS] Titolo del sito cambia dimensione HTML e CSS 2
A icone css in selectmenu jQuery 2
M Problematica CSS (tag html,body) HTML e CSS 4
W [C#] Il componente "WebBrowser" non mi esegue css e javascript .NET Framework 0
W inclusioni css in eccesso, cosa fare? HTML e CSS 1
M [WordPress] Modifiche CSS su lightbox WordPress 2
T countdown da sistemare con i CSS... HTML e CSS 4
Y Finestra dialogo CSS Modal HTML e CSS 6
L [css e html] destra e sinistra (menu navigazione) HTML e CSS 3
P [Gratuito][Cerco] qualcuno per fare menu a tendina ottimizzato per mobile-responsive con css e html Offerte e Richieste di Lavoro e/o Collaborazione 3
D How to learn HTML and CSS? HTML e CSS 2
M CSS posizionamento stile HTML e CSS 2
I [HTML/CSS] Consigli sul mio primo sito HTML e CSS 9
V Galleria con CSS e Javascript Javascript 2
C CSS pagina a schermo intero HTML e CSS 3
V Menù CSS da file in cartella esterna HTML e CSS 4

Discussioni simili