Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 1 of 1
  1. #1
    Junior Member
    Join Date
    Mar 2016
    Posts
    2
    Member #
    53589

    toggle/switch button function suited for the image attached with code

    Hello,

    I have included some code that I have tried to to create for a toggle/switch button function suited for the image attached, but its not working the way I intended it to work. I would like for it to work like below:

    toggle.jpg

    The button is essentially choosing between two states/selections/radio buttons, either public or private / yes and no. The white box on the left is opaque(the only moving box that can go left or right), hiding the 'private' selection underneath (state off), while the 'public' selection is displayed (on, selected)

    The button what I have currently, moves the label box, but with text seen through, I dont want to see the underlying text so this state should be un-selected/hidden, while the selected displayed text is selected/displayed.

    I have seen bootstraps version and other similar buttons, but they dont work in the manner that I would like. I made this design, and I wish for it to work successfully.

    Here is my current code HTML and CSS, I want to do it without the need for jQuery/Javascript:

    [<body>
    <div class="register">
    <div class="register-switch">
    <input type="radio" name="sex" value="F" id="sex_f" class="register-switch-input" checked>
    <label for="sex_f" class="register-switch-label">Public</label>

    <input type="radio" name="sex" value="M" id="sex_m" class="register-switch-input">
    <label for="sex_m" class="register-switch-label">Private</label>
    </div>
    </div>
    </body>]

    [.register {
    font: 14px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0 auto;
    width: 180px;
    border-radius: 20px;

    }

    .register-switch {
    height: 24px;
    padding: 4px;
    background-color: blue;
    border-radius: 2px;
    -webkit-box-shadow: inset 0 1px rgba(0, 0, 0, 0.05), inset 1px 0 rgba(0, 0, 0, 0.02), inset -1px 0 rgba(0, 0, 0, 0.02);
    box-shadow: inset 0 1px rgba(0, 0, 0, 0.05), inset 1px 0 rgba(0, 0, 0, 0.02), inset -1px 0 rgba(0, 0, 0, 0.02);
    }

    .register-switch-input {
    display: none;
    }

    .register-switch-label {
    float: right;
    width: 50%;
    line-height: 24px;
    color: white;
    text-align: center;
    cursor: pointer;
    }
    .register-switch-input:checked + .register-switch-label {
    font-weight: 100;
    color: #434248;
    background: white;
    border-radius: 2px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.1);
    }
    ]

  2.  


Remove Ads

Posting Permissions

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

Tags for this Thread

All times are GMT -6. The time now is 06:18 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com