Results 1 to 4 of 4

Thread: Width of Span Not Setting and Style Elements After Checkbox Checked

  1. #1

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,715

    Width of Span Not Setting and Style Elements After Checkbox Checked

    I have a two-for-one question and it relates to the same control I'm trying to build. I'm trying to make a toggle switch where if you click on the control it slides horizontally to signify a True or False value. Here is my code thus far:
    HTML Code:
    <label class="switchButton">
        <span>Hello World!</span>
        <input type="checkbox" checked />
        <span class="slider"></span>
        <span>Goodbye World!</span>
    </label>
    Code:
    .switchButton {
        border: 1px solid #ccc;
        padding: 2px;
    }
    
    .switchButton input[type="checkbox"] {
        display: none;
    }
    
    .switchButton input[type="checkbox"]:checked > span:first-of-type  {
        display: inline;
    }
    
    .switchButton input[type="checkbox"]:checked > span:last-of-type  {
        display: none;
    }
    
    .switchButton > span:first-of-type {
        display: none;
    }
    
    .switchButton > span:last-of-type {
        display: inline;
    }
    
    .slider {
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 1px;
        width: 50%;
    }
    My first issue is that my .slider <span> is not having it's width set at 50% even though I specifically tell it to. My second issue is that I want to show/hide the first and last <span> element dependent on the checked value of the checkbox by setting the display to either none or inline, but when I change the value, nothing is happening.
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  2. #2
    Fanatic Member
    Join Date
    Jun 2008
    Posts
    1,023

    Re: Width of Span Not Setting and Style Elements After Checkbox Checked

    You cannot set width of span because of its "display" setting... change the display of the span to inline-block, to change its width.

    And for the second problem:

    Maybe some of the answers here may be useful.
    http://stackoverflow.com/questions/6...r-divs-styling

    Specifically referring to the best rated response using the "~"-combinator

    Code:
    #a:checked ~ #b {
        background: #ccc
    }
    Created a fiddle for you. https://jsfiddle.net/tbrL9fzr/3/
    Last edited by Justa Lol; Jun 11th, 2015 at 07:58 PM.

  3. #3
    Hyperactive Member coothead's Avatar
    Join Date
    Oct 2007
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    284

    Re: Width of Span Not Setting and Style Elements After Checkbox Checked

    Hi there dday9,

    here is how I would approach your little brain teaser...
    Code:
    
    <!DOCTYPE html>
    <html  lang="en">
    <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>untitled document</title>
    
    <style media="screen">
    body {
        background-color:#f0f0f0;
        font-family:arial,helvetica,sans-serif;
        font-size:100%;
     }
    .switchButton {
        position:relative;
        display:block;
        width:240px;
        padding:2px;
        margin:auto;
        border:1px solid #999;
        border-radius:10px;
        background-color:#fff;
        box-shadow:5px 5px 5px #999;
        cursor:pointer;overflow:hidden;
    }
    .switchButton span {
        float:left;
        width:120px;
        padding:10px 0;
        font-size:80%;
        color:#666;
        text-align:center;
     }
    .switchButton input[type="checkbox"] {
        display:none;
     }
    .switchButton input[type="checkbox"]:checked ~ span:first-of-type  {
          color:#666;
     }
    .switchButton input[type="checkbox"]:checked ~ span:last-of-type {
          color:#fff;
     }
    .switchButton input[type="checkbox"]:checked ~ span:nth-child(3) {
        top:2px;
        margin-left:118px;
        border-radius:0 8px 8px 0;
     }
    .switchButton  span:first-of-type  {
         color:#fff;
         -webkit-transition:all 1.5s ease;
         transition:all 1.5s ease;
     }
    .switchButton span:last-of-type { 
         color:#666;
         -webkit-transition:all 1.5s ease;
         transition:all 1.5s ease;
     }
    .switchButton span:nth-child(3) {
        position:absolute;
        float:none;
        display:block;
        top:2px;
        width:118px;
        padding:9px 0;
        margin-left:0;
        z-index:2;
        border:1px solid #999;
        border-radius:8px 0 0 8px;
        width:120px;
        background-color:#ccc;
        background-image:linear-gradient(to bottom,#eee,#aaa);
        box-shadow:inset 0 0 10px #666;
         -webkit-transition:all 1.5s ease;
         transition:all 1.5s ease;
     }
    </style>
    
    </head>
    <body>
    
    <label class="switchButton">
        <input type="checkbox" checked>
        <span>Hello World!</span>
        <span>&nbsp;</span>
        <span>Goodbye World!</span>
    </label>
    
    </body>
    </html>
    Last edited by coothead; Jun 11th, 2015 at 09:07 PM. Reason: tpynig eorrr


    ~ the original bald headed old fart ~

  4. #4
    Frenzied Member tr333's Avatar
    Join Date
    Nov 2004
    Location
    /dev/st0
    Posts
    1,605
    CSS layout comes in to the 21st century with flexbox!
    Just another Perl hacker,

Posting Permissions

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



Click Here to Expand Forum to Full Width