CODEWITHSUNDEEP
htmlcssmvc-editor-templates
Aqib Mehrban
Aqib Mehrban

Reputation: 71

CSS checked not working

HTML Element:

<p> <input type="button"> id="edit" value="edit page" /> </p>

This div has been hidden with display:none , I want to toggle the visibility to display:normal.

@Html.EditorFor(
    modelItem => model.user, 
    new {
        htmlAttributes = new {
            @ class = "user" 
        } 
    } 
)

The class 'user' has the following properties:

.user {
    width:200px;
    margin-left:3px;
    display:none;
}

For some reason my checked CSS isn't working:

#edit:hover + user {
    color:black;
}

#edit:checked + user {
    display:normal;
}

JSFiddle Example : https://jsfiddle.net/gp7pyssu/

I don't want to use any Javascript to toggle visibility, I'd like it to be done in pure CSS3.

Upvotes: 0

Views: 2970

Answers (2)

Finrod
Finrod

Reputation: 2550

Several CSS issues here:

display value

In CSS, there is no normal value for display.

Use block, inline or another value that fits your needs : http://www.w3.org/wiki/CSS/Properties/display

+ selector

To use the + selector in your CSS, you have to have your div just after your input, so you have to remove the p surrounding the input: http://www.w3.org/wiki/CSS/Selectors/combinators/adjacent

:checked selector

The selector :checked is only available for radio and checkbox input, you can't use it with a button input: http://www.w3.org/wiki/CSS/Selectors/pseudo-classes/:checked

With all that, you can check this working JSFiddle

Upvotes: 4

Shaymol Bapary
Shaymol Bapary

Reputation: 458

<p> <input type="button" id="edit" value="edit page" /> </p>

#edit:checked + user {
display:block;
}

Have a look

Upvotes: 0

Related Questions