Is there a css-way to make a onclick
strike-through button. So when you click a button(piece of text) selected links will get the strike-through text-decoration
?
Attached image as explanation.
Is there a css-way to make a onclick
strike-through button. So when you click a button(piece of text) selected links will get the strike-through text-decoration
?
Attached image as explanation.
Pure CSS simulating a button. When clicked, the paragraph turns red with strikethrough.
input[id=cb] {
display: none;
}
input[id=cb]:checked~p.strikethrough {
text-decoration: line-through;
color: red;
}
label {
border: thin solid darkgray;
border-radius: 5px;
padding: 10px;
display: inline-block;
margin-top: 5px;
}
<input name="cb" type="checkbox" id="cb">
<label for="cb">Click me</label>
<p class="strikethrough">Paragraph 1</p>
<p>Paragraph 2</p>
<p class="strikethrough">Paragraph 3</p>
You can achieve this on any element using JS. Also, not only you can strike
onClick
but also remove the striked content back to its original state.
$(function(){
var $curParent, Content;
$(document).delegate("span","click", function(){
if($(this).closest("s").length) {
Content = $(this).parent("s").html();
$curParent = $(this).closest("s");
$(Content).insertAfter($curParent);
$(this).closest("s").remove();
}
else {
$(this).wrapAll("<s />");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<span>click</span>/<span>click</span>
</div>
Using wrap function we can insert an HTML structure around the inner elements like below:
$('input[type=button]').click(function() {
$('a').wrap("<strike>");
//$('a').css("text-decoration", "line-through");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type='button' id='but' value='Click'>
<a href="#">link</a>
With CSS only is not possible since a:visited
allows only to change:
color
background-color
border-color
(and its sub-properties)outline-color
text-decoration
styling is not permitted due to the user's privacy issues.
Solution with jQuery:
$("a").click(function() {
$(this).css("text-decoration", "line-through");
});
$("a").click(function() {
$(this).css("text-decoration", "line-through");
});
a {
text-decoration: none;
color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">link</a>
button:visited,
button:focus,
button:active {
text-decoration: line-through;
}
<html>
<head></head>
<body>
<button>strike text onclick</button>
</body>
</html>