SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Thread: Hi!

  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2014
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hi!

    What selector can be used to when one radio button styles changed to another. I connected the input i label, styles can now write for the label
    This selector sets the style of the current label, but it is necessary that they bear the label adjacent
    Code:
    input[type=radio]:checked + label
    I want to do it on css3
    Code:
     <input id="n1" type="radio" name="p01-contact_fields[5]" value=" Мужчина"> 
                        <label for="n1"> Мужчина</label> 
                        <input id="n2" type="radio" name="p01-contact_fields[5]" value=" Женщина"> 
                        <label for="n2"> Женщина</label></div>
    For example, as here, only horizontal button switch
    http://tympanus.net/Tutorials/CSS3Bu...es/index2.html

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    but it is necessary that they bear the label adjacent
    Hi, welcome to Sitepoint and sorry we missed you post

    You have to use the adjacent selector because that's the way to select something based on a separate elements condition.

    You can also using the general sibling selector to select all siblings but generally you want to select the next element from the checkbox and then perform styling on that element.

    If you wantedt to stylemore than one element then you could putr the elements inside a div and target them that way.

    e.g.

    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>
    .error { display:none }
    input[type=radio]:checked + div {
    	background:#f9f9f9;
    	padding:10px;
    }
    input[type=radio]:checked + div .error {
    	color:red;
    	font-weight:bold;
    	display:block
    }
    </style>
    </head>
    
    <body>
    <input id="n1" type="radio" name="p01-contact_fields[5]" value=" Мужчина">
    <div>
    <label for="n1"> Мужчина</label>
    <span class="error">Warning You have selected this</span>
    <div>
    </body>
    </html>
    It might help if we knew what the problem was that you were having and what you wanted to style?


Tags for this Thread

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
  •