|
|||
box-shadow um ein Formular darstellen
Hallo und frohes neues,
ich habe folgendes Problem. Vorneweg erstmal die Konstellation: Ich habe ein Formular in dem ein "select-", "input text-", und ein "input submit-Element" enthalten sind und horizontal ausgerichtet sind. Nun möchte ich gerne das ein leuchtender Rahmen in Form vom Box-Schatten um das gesamte Formular scheint sobald eins, egal welches, der Elemente angewählt ist. bisherige CSS-Code dazu (es handelt sich um eine Suchbar) Code:
* { padding: 0; margin: 0; } #search_box { } .saerch_nav { float:left; height: 30px; outline: none; } #search_label { width: 80px; text-align: right; padding-right: 3px; } #search_select { width: 60px; border: 1px solid #7E7E7E; border-radius: 5px 0 0 5px; background-color: #E4E4E4; color: #5C5C5C; } #search_select > option { background-color: #FFFFFF; color: #333333; } #search_text { paddin: 5px; border-top: 1px solid #7E7E7E; border-bottom: 1px solid #7E7E7E; border-right: none; border-left: none; height: 28px; width: 200px; padding-left: 5px; } #search_submit { background: #E4E4E4; color: #5C5C5C; border: 1px solid #7E7E7E; border-radius: 0 5px 5px 0; width: 60px; cursor: pointer; } Code:
<div id="search_box"> <label for="search_textbox" id="search_label" class="saerch_nav"> <b>Suche :</b> </label> <form action="#" id="search_form" method="get"> <select name="search_select" id="search_select" class="saerch_nav"> <option selected="selected" value="all">ALLE</option> <option value="a">AAAAAAAAAAA</option> <option value="b">B</option> <option value="c">C</option> <!-- ... --> <option value="y">Y</option> <option value="z">Z</option> </select> <input type="text" name="search_text" id="search_text" class="saerch_nav" /> <input type="submit" id="search_submit" class="saerch_nav" value="LOS" /> </form> </div> Code:
#search_select:focus, #search_select:focus + #search_text, #search_select:focus + #search_submit, #search_text:focus, #search_text:focus + #search_select, #search_text:focus + #search_submit, #search_submit:focus, #search_submit:focus + #search_select, #search_submit:focus + #search_text { box-shadow:0 0 5px #C53B3D; -webkit-box-shadow:0 0 5px #C53B3D; -moz-box-shadow:0 0 5px #C53B3D; } Ich hoffe das mir hier jemand einen Lösungsansatz geben kann bzw. ob dies nur mittels CSS möglich ist. |
Sponsored Links |
|
|||
Genau so soll es sein. Wenn ich auf eines der drei Felder klicke, soll ein box-shadow um das gesamte Formular erscheinen.
Gut, ich hoffte dieses Problem mittels CSS lösen zu können... Wenn niemand sonst eine Idee dazu hätte, wäre das geklärt ^^ |
|
|||
So funktioniert CSS leider nicht, zumindest noch nicht, weil es keinen Eltern-Selektor gibt. Ich habe gelesen, dass es in CSS4 die Pseudoklasse :has() geben wird:
li:has(> a.active) { /* styles to apply to the li tag */ } Warum möchtest du denn kein JavaScript verwenden? Ich könnte dir bei Bedarf den Code basteln. |
|
|||
Es geht nicht darum das ich kein Javascript nutzen möchte ^^. Ich möchte die Sprache bzw. die Elemente, in diesem Fall für Html und CSS, richtig kennen und lernen um anschließend darauf weiter aufbauen und anwenden zu können. Ein Haus baut man schließlich ja auch nicht von oben nach unten ^^.
Ich bin so noch in der "Lern-Phase". So das hatte nichts mit dem Thema weiter zu tun gehabt und von daher würde ich das ganze dann auch als abgeschlossen sehen. |
|
|||
Soweit ich weiß geht das tatsächlich nicht mit CSS und divs. Was manchmal hilft, ist Dinge in Tabellen zu stopfen. Ist aber kompliziert und mancht die Seite oft nicht mehr responsive bzw. fluid.
Falls du da tiefer rein willst: SELFHTML: HTML/XHTML / Tabellen / Tabellen als Mittel fr Web-Seiten-Layouts Hat ein kleines revival erfahren, seit es den Befehl dsplay: table-cell gibt. Habs noch nie gemacht, aber vielleicht, vielleicht gibts da ne Möglichkeit zu basteln, was du haben wilslt lg |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Box Shadow Inset (eine seite) | gandalf_hh | CSS | 18 | 18.01.2012 17:53 |
Inhalt der Box darstellen | seeadler | CSS | 107 | 11.11.2011 16:40 |
Kniffliges Layout mit float | Roadrunnerle | CSS | 6 | 14.03.2006 12:26 |
#boxes a:hover.info: 2.posting mit css !!! | marioN | CSS | 5 | 25.01.2004 18:04 |
#box a:hover .info: css-layout: ie6.0/win, moz.1ie5.0/mac, | marioN | CSS | 2 | 19.01.2004 18:17 |