CMS Contao 2.11.1x

Hier findest Du einige von mir geänderte Templates, die ich unter anderem auf dieser Seite verwende. Einige Ideen und Anregungen hab ich dem Contao Community Forum entnommen. Viel Hilfe habe ich auch vom Kellerkind erhalten, an dieser Stelle nochmals vielen Dank dafür!

Formulare mit schönerem Fokus / Hovereffekt

Mit CSS kann man den Formularen einen schöneren Fokus / Hovereffekt geben, hier ein Beispiel dazu.

formbox.css:

Code eingefügt. Hier klicken zum Ein- / Ausblenden
/* Fieldset */
#main .formbody fieldset {
    width:80%;
    margin:0 0 30px;
    padding:10px;
    border:1px solid #dfdfdf;
}
/* Fieldset Legende */
#main .formbody fieldset legend {
    margin:-8px 0 0 -5px;
    padding:0 5px;
    font-size:0.9em;
    font-weight:bold;
    color:#999;
}
/* Einzeilige Textfelder */
#main .formbody .text {
    width:200px;
    margin:0 0 4px;
    padding:6px;
    border:1px solid #efefef;
    font-size:0.9em;
    /* Gecko-Browser (Firefox) */ -moz-box-shadow: inset 3px 3px 6px #cfcfcf;
    /* Webkit-Browser (Safari, Chrome) */ -webkit-box-shadow: inset 3px 3px 6px #cfcfcf;
    /* allgemein CSS3 */ box-shadow: inset 3px 3px 6px #cfcfcf;
}
/* Mehrzeilige Textfelder */
#main .formbody .textarea {
    width:300px;
    height:100px;
    margin:0 0 4px;
    padding:6px;
    border:1px solid #efefef;
    font-size:0.9em;
    /* Gecko-Browser (Firefox) */ -moz-box-shadow: inset 3px 3px 6px #cfcfcf;
    /* Webkit-Browser (Safari, Chrome) */ -webkit-box-shadow: inset 3px 3px 6px #cfcfcf;
    /* allgemein CSS3 */ box-shadow: inset 3px 3px 6px #cfcfcf;
}
/* Hoverzustand einzeilige / mehrzeilige Textfelder */
#main .formbody .text:hover, #main .formbody .textarea:hover {
    border:1px solid #CF9B9B;
}
/* Fokuszustand einzeilige Textfelder */
#main .formbody .text:focus {
    width:250px;
    border:1px solid #CF9B9B;
    font-size:1.2em;
}
/* Fokuszustand mehrzeilige Textfelder */
#main .formbody .textarea:focus {
    width:450px;
    height:150px;
    border:1px solid #CF9B9B;
    font-size:1.2em;
}
/* Captcha Feld */
#main .formbody .captcha {
    width:100px;
    margin:0 0 4px;
    padding:6px;
    border:1px solid #efefef;
    font-size:0.9em;
    /* Gecko-Browser (Firefox) */ -moz-box-shadow: inset 3px 3px 6px #cfcfcf;
    /* Webkit-Browser (Safari, Chrome) */ -webkit-box-shadow: inset 3px 3px 6px #cfcfcf;
    /* allgemein CSS3 */ box-shadow: inset 3px 3px 6px #cfcfcf;
}
/* Captcha Textbeschreibung */
#main .formbody .captcha_text {
    font-size:0.9em;
}
/* Hoverzustand Captcha Feld */
#main .formbody .captcha:hover {
    border:1px solid #CF9B9B;
}
/* Fokuszustand Captcha Feld */
#main .formbody .captcha:focus {
    width:150px;
    border:1px solid #CF9B9B;
    font-size:1.2em;
}
/* Fehleranzeige */
#main .formbody p.error {
    width:75%;
    margin:10px 0;
    padding:5px 0 5px 10px;
    font-size:1.2em;
    font-weight:bold;
    color:#f00;
    /* Gecko-Browser (Firefox) */ -moz-border-radius: 7px;
    /* Webkit-Browser (Safari, Chrome) */ -webkit-border-radius: 7px;
    /* allgemein CSS3 */ border-radius: 7px;
}

Zurück