onclick event using css only

Question

hi iam trying to due a on click event using css. no need java script . i due a code. that i added here . but this is working only on click time . i need it after click.

.left_arrowIcon{


  width: 0; 
  height: 0; 
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent; 
  border-right:16px solid blue; 
  font-size: 0px;
  margin-top: 30px; 
  margin-left: 32px;
  display: inline-block;
    transition-duration: 1s;
    transition-property: transform;
}

ul {
  list-style-type: none;
}
.left_arrowIcon:active{
   transform: rotate(-90deg);

    /*transition-duration: 2s;*/

}

`<!DOCTYPE html>
<html>
<head>
<link href="index.css" rel="stylesheet">

<script src="index.js"></script>

</head>
<body>
    <ul>
         <li> <div style="font-size: 40px;float: left; margin-left: 14px;">
     menu </div> <span  class="left_arrowIcon"></span>  </li>
    </ul>       

</body>
</html>`

if i hold the click it rotate the triangle. if i leave it it go to the first position. i need the rotation also in after the click event . is there any idea to due this?

Use JavaScript to make changes to a document based on user interaction. It is designed for this sort of thing. CSS is not. You can do some "clever" hacks with CSS, but they often are fragile and have accessibility implications. — Quentin
– Quentin, Commented Jan 11, 2017 at 10:07
@Quentin thanks your comment. i thought it is a simple think . that's why i am use this way — manu p
– manu p, Commented Jan 11, 2017 at 10:11
Yes, this tendention to (over)use and (ab)use CSS for everything is... at least, strange... Especially when hacks are so 'clever' that you need a tone of additional HTML/CSS code to achieve something what can be done with few lines of javascript. @manu p, it is easeier with javascript, for sure: jsfiddle.net/gzmwu21r ;) — sinisake
– sinisake, Commented Jan 11, 2017 at 10:23

Ahmed Salama · Accepted Answer · 2017-01-11 10:37:36Z

The only way to simulate an actual click event using only CSS is to use the checkbox hack. It works by making <input type="checkbox"> and attaching a label for it.

<ul>
  <li>
    <div style="font-size: 40px;float: left; margin-left: 14px;">menu </div>
    <input type="checkbox" id="btnControl"/>
    <label for="btnControl"><span  class="left_arrowIcon"></span> </label>
  </li>
</ul>

Now if we clicked at the span.left_arrowIcon it will change the state of checkbox input. so, now we can use the :checked pseudo-class to make the animation that you want.

#btnControl:checked + label > .left_arrowIcon {
    transform: rotate(-90deg);
}

.left_arrowIcon{
  width: 0; 
  height: 0; 
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent; 
  border-right:16px solid blue; 
  font-size: 0px;
  margin-top: 30px; 
  margin-left: 32px;
  display: inline-block;
    transition-duration: 1s;
    transition-property: transform;
}

ul {
  list-style-type: none;
}

#btnControl {
    display: none;
}

#btnControl:checked + label > .left_arrowIcon {
    transform: rotate(-90deg);
}

<ul>
  <li>
    <div style="font-size: 40px;float: left; margin-left: 14px;">menu </div>
    <input type="checkbox" id="btnControl"/>
    <label for="btnControl"><span  class="left_arrowIcon"></span> </label>
  </li>
</ul>

Collectives™ on Stack Overflow

onclick event using css only

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related