zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden box-shadow um ein Formular darstellen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 03.01.2015, 01:07
34SY
neuer user
Thread-Ersteller
 
Registriert seit: 03.01.2015
Beiträge: 3
34sy befindet sich auf einem aufstrebenden Ast
Standard 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;
	 }
Und der Entsprechende HTML Code

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>
Eine Sache die ich probiert hatte aber völlig daneben ging war:

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;
	 }
Dies hat mir den Effekt nur teilweise gebracht...
Ich hoffe das mir hier jemand einen Lösungsansatz geben kann bzw. ob dies nur mittels CSS möglich ist.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 05.01.2015, 16:35
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

Wenn man eines der 3 Felder anwählt, soll ein box-shadow um das GESAMTE Formular erscheinen?

Das ist mit CSS nicht möglich, eher mit JavaScript.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 06.01.2015, 20:31
34SY
neuer user
Thread-Ersteller
 
Registriert seit: 03.01.2015
Beiträge: 3
34sy befindet sich auf einem aufstrebenden Ast
Standard

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 ^^
Mit Zitat antworten
  #4 (permalink)  
Alt 07.01.2015, 08:58
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

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.
Mit Zitat antworten
  #5 (permalink)  
Alt 11.01.2015, 06:07
34SY
neuer user
Thread-Ersteller
 
Registriert seit: 03.01.2015
Beiträge: 3
34sy befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #6 (permalink)  
Alt 11.01.2015, 14:07
Neuer Benutzer
neuer user
 
Registriert seit: 18.12.2014
Beiträge: 8
tommyJ befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:22 Uhr.