SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Parent Selector

    Ok so I have an input field, #searchfield and it is contained within a wrapper, #seachbar. Is there a way I can select the wrapper when the input field is in focus? Or is this a job for javascript?


    I would essentially like to do this but affect the #searchbar div instead of #searchfield:
    Code CSS:
    #searchbar > #searchfield:focus {
    	-moz-box-shadow: inset 0 5px 5px -5px #aaa;
    	-webkit-box-shadow: inset 0 5px 5px -5px #aaa;
    	box-shadow: inset 0 5px 7px -5px #aaa;
    }

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,173
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    No, parent selecting is the job of JavaScript, I'm afraid. (I think there's been a long debate over whether CSS should include this ... but it won't happen any time soon. Maybe in CSS4!)

  3. #3
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    A parent selector has been drafted in the CSS4 spec, it's still not clear what the final syntax will be but the W3C team have acknowledged the fact it is needed and will be working closely with browser vendors to get a working draft out soon.

  4. #4
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys, I guess I'll be using javascript then

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,173
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by chris.upjohn View Post
    A parent selector has been drafted in the CSS4 spec.
    Cool! Now I just need them to perfect cryogenics so I'll get a chance to use this one day.

  6. #6
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    lol, well said sir


    Sent from my iPhone using Tapatalk

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    We can cheat with css and achieve that effect without javascript.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style>
    fieldset { border:none }
    #searchbar {
    	position:relative;
    	z-index:1;
    	width:500px;
    	margin:auto;
    	border:1px solid #000;
    }
    #searchbar span {
    	position:absolute;
    	top:0;
    	left:0;
    	bottom:0;
    	right:0;
    	z-index:-1;
    	-moz-box-shadow: inset 0 5px 5px -5px #aaa;
    	-webkit-box-shadow: inset 0 5px 5px -5px #aaa;
    	box-shadow: inset 0 5px 7px -5px #aaa;
    	display:none
    }
    #searchfield:focus + span { display:block }
    </style>
    </head>
    
    <body>
    <div id="searchbar">
    		<form name="form1" method="post" action="">
    				<fieldset>
    						<legend>Search</legend>
    						<label for="searchtext">Enter text</label>
    						<input type="text" name="searchtext" id="searchfield">
    						<span></span>
    				</fieldset>
    		</form>
    </div>
    </body>
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •