Мне нужно создать пользовательский флажок, который выглядит как кнопка с использованием CSS. Я много искал в google, но у меня нет правильного ответа, который выполнил мое требование. Я пытаюсь реализовать в приложении Ionic.Пользовательский флажок Посмотрите, как кнопка
Пожалуйста, помогите мне.
попробовать это:
Здесь я использовал шрифт-удивительный значок, чтобы показать DIV как проверенные, но вы можете использовать бутстраповские glyphicons или изображение галочки в качестве фонового изображения, а также.
$(".customCheck").click(function(){
$(".checkMark").toggleClass("checked");
});.customCheck{
background-image : url('http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg');
width:100px;
height:100px;
background-position:center;
cursor:pointer;
}
.checkMark{
height:100%;
width:100%;
}
.checkMark.checked{
position:relative;
}
.checkMark i{
display:none;
}
.checkMark.checked i{
color:white;
font-size:30px;
font-weight:bold;
position:absolute;
top:35px;
left:35px;
z-index:10;
display:block;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="customCheck">
<div class="checkMark">
<i class="fa fa-check-square-o"></i>
</div>
</div>
Ожидается, что вы по крайней мере попытаться закодировать это для себя. Stack Overflow не является службой записи кода. Я бы предположил, что вы делаете некоторые [** дополнительные исследования **] (http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users) , либо через Google, либо путем поиска SO, сделайте попытку и. если у вас все еще есть проблемы, вернитесь ** с кодом ** и объясните, что вы пробовали. –