CODEWITHSUNDEEP
htmlcss
Manixman
Manixman

Reputation: 307

it keeps navigating me to top of page when clicking on a button

Below is a piece of code where it styles a checkbox to make it look like a button, problem I am having though is how come when I click on the checkbox button that it keeps navigating me to the top top of the page?

HTML/PHP:

echo '<div id="ck-button"><label><input type="checkbox" name="options[]" id="option-' . $indivOption . '" value="' . $indivOption . '" /><span>' . $indivOption . '</span></label></div>';

CSS:

#ck-button {
    margin:8px;
    background-color:#EFEFEF;
    border:1px solid #D0D0D0;
    overflow:auto;
    float:left;
}

#ck-button:hover {
    background:green;
}

#ck-button label {
    float:left;
    width:4.0em;
}

#ck-button label span {
    text-align:center;
    padding:3px 0px;
    display:block;
}

#ck-button label input {
    position:absolute;
    top:-20px;
}

#ck-button input:checked + span {
    background-color:#911;
    color:#fff;
}

Upvotes: 1

Views: 129

Answers (1)

Jeff Miller
Jeff Miller

Reputation: 2443

You need to add position: relative; to the #ck-button selector.

#ck-button {
    margin:8px;
    background-color:#EFEFEF;
    border:1px solid #D0D0D0;
    overflow:auto;
    float:left;
    position: relative;
}

Here's a working example on JS Bin. (scroll down to see the button)

Upvotes: 2

Related Questions