自己做一个css复选框

淡淡的烟草味﹌ 2022-09-15 11:49 186阅读 0赞

<!DOCTYPE>
    <meta charset='UTF-8' />
    
    <style>
    	 
    .span_my_checkbox {
    	display:inline-block;
    	border:1px solid limegreen;
    	position:relative;
    	padding:10px;
    	text-align:center;
    	width:100px;
    }
    	
    .span_my_yes {
    	width: 0;
    	height: 0;
    	position:absolute;
    	bottom:0;
    	right:0;
    	border-bottom: 15px solid limegreen;
    	border-left: 30px solid transparent;
    }
    
    .span_my_yes:after {
    	content:'';
    	position:absolute;
    	right:5;
    	width:5px; height:10px;
    	top:2;
    	border:1px solid white;
    	border-top:0;
    	border-left:0;
    	background:transparent;
    	-webkit-transform: rotate(35deg);
    	-moz-transform: rotate(35deg);
    	-o-transform: rotate(35deg);
    	-ms-transform: rotate(35deg);
    	transform: rotate(35deg);
    }
    
    </style>
     
    
    
    <span class='span_my_checkbox' >
    苹果
    <span class='span_my_yes'></span>
    </span>
    
    <span class='span_my_checkbox' >
    梨子
    <span class='span_my_yes'></span>
    </span>

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd3V6dXl1MzY1_size_20_color_FFFFFF_t_70_g_se_x_16][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd3V6dXl1MzY1_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/cd0eaaeac4774d16b7da37338fcceb3f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，186人围观）

还没有评论，来说两句吧...

相关阅读

相关 html 复选框选中一个

function changeCheckbox()\{ $('input\[type="checkbox"\]').on('change', function() \{

拼搏现实的明天。/ 2023年03月13日 03:14/ 0 赞/ 32 阅读

相关 css复选框样式_使用CSS样式复选框

css复选框样式 Introduction: 介绍： Sometimes we want to develop a website or web page that wo

秒速五厘米/ 2023年03月05日 11:58/ 0 赞/ 44 阅读

相关 matlab gui复选框的对象之有一个,MATLAB GUI中的复选框

我的GUI在单个搜索按钮下有两个复选框，即colourcheck和Texturecheck。如果我点击搜索按钮，它应该检查上面提到的两种类型，并且应该运行相应的程序，并且如果两

迷南。/ 2023年01月13日 10:41/ 0 赞/ 143 阅读

相关 html复选框组,html只选择一个组中的一个复选框

![1b4feb405b5792c6d7e10f91e370d859.png][] MM们这个片段将：允许像单选按钮一样分组就像收音机一样允许全部取消选择// the s

分手后的思念是犯贱/ 2022年10月06日 00:56/ 0 赞/ 27 阅读

相关 CheckBox复选框

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schem

男娘i/ 2022年09月26日 03:15/ 0 赞/ 312 阅读

相关自己做一个css复选框

<!DOCTYPE> <meta charset='UTF-8' /> <style> .span_my_checkbo

淡淡的烟草味﹌/ 2022年09月15日 11:49/ 0 赞/ 187 阅读

相关复选框

![70][] package tu; import java.awt.BorderLayout; import java.awt.B

「爱情、让人受尽委屈。」/ 2022年05月19日 08:10/ 0 赞/ 356 阅读

相关 jQuery 单选框/复选框美化

对于前端萌新来说，美化表单是个痛苦的事情，通常都是去寻找插件这种逃避的办法，其实这并不是难事。在上篇文章中提到了兄弟元素选择器在表单美化中表现突出，下面的示例源码将体现基础篇

我不是女神ヾ/ 2022年05月10日 00:08/ 0 赞/ 519 阅读

相关 AngularJS单选、复选框

　　在项目开发中，有应用到单选、复选框，对于Angular来讲，其实有很多实现方法。如下应用实例：一.AngularJS radio单选实例　　在页面上有几个项目名称，

清疚/ 2022年04月06日 10:51/ 0 赞/ 678 阅读

相关复选框checkbox,单击行单选,单击复选框也单选

$('table').on('click', 'tr', function (e) { //选择checkbox判断事件 if (e.t

太过爱你忘了你带给我的痛/ 2021年09月15日 15:10/ 0 赞/ 880 阅读