我也来个checkbox美化[再加个小图标]

原创 hugeannex 随笔 呵呵 2490阅读 2014-06-17 16:32:11 举报

看了云婣同学来了个select的美化,刚刚接手过来公司一同事做了一半的网站,正好有个checkbox的美化,他原来就是a标签加背景图(还没写js代码吧。。。),看了看,不太舒服我就动手改了。
用css3对checkbox进行美化 IE9+ (radio同理)
代码片段 1

----------------------------------------------------------------------------------###再加一点:
经常看到这样的小标,你是怎么实现的呢?

我也来个checkbox美化[再加个小图标]

以前都是用图片来当背景,现在css3来袭了,公司的项目正好有这个效果,我就用css3实现了,抛砖引玉一下。。。
代码片段 2

评论 ( 22 )
最新评论
移花香 2F 2014-07-27 08:00:30 22F

网上有类似的,当时做的是一个三角形(隐藏三个border,你这个隐藏一个border)

hugeannex 20F 2014-06-22 10:09:44 21F

   呃,笨和程序没联系吧,就程序玩久了,想得多一点点而已。

Ann大然 8F 2014-06-22 10:08:17 20F

大神想法就是独特 你总说自己笨,显然是在骗人啊

Is华丽 8F 2014-06-20 17:18:25 19F

你这个和flat ui效果差不多

tianxiaofeng747 8F 2014-06-20 15:31:00 18F

版本 36.0.1976.2 m

hugeannex 8F 2014-06-20 14:36:50 17F

我用谷歌试了,没发现你说的问题 。没装IE11

tianxiaofeng747 8F 2014-06-20 14:20:16 16F

我能弱弱的评价下么? 你这个 做出来, 我用 谷歌浏览器 如果鼠标不动一直点击的话,点击第三下就 不动了。ie11下也有问题,有的时候需要点击两下才行,只有火狐是对的。请问怎么破。

hugeannex 8F 2014-06-19 15:28:14 15F

年轻人?你太逗了,就拿婚否来说,点击高度下面的1/3,你能改变input?
当然,你可以说把input的高度再调高,但我觉得你这是拼凑成的,外的的尺寸一改,里面的也得改,样式还是js来操作的。。。

shy2850 8F 2014-06-19 15:13:13 14F

    年轻人不要这样毛躁,代码都不看直接下结论。

hugeannex 8F 2014-06-19 13:23:59 13F

   一般般啦。。。

hugeannex 8F 2014-06-19 13:23:43 12F

懂了原理做什么样式都是一样的。
但是你做的都是表面骗人的,表单的checked值改了吗?没改!没改就错。

shy2850 8F 2014-06-19 13:16:30 11F
13717776674 8F 2014-06-19 11:21:12 10F

太厉害了。

chinadream 8F 2014-06-18 18:01:59 9F

sina么?

hugeannex 7F 2014-06-18 14:08:04 8F

浪去了。。。

chinadream 2014-06-18 13:42:56 7F

楼主换到啥公司了捏:)

bingxuelover 2014-06-18 11:09:53 6F

很有想法

hugeannex 2014-06-17 18:36:22 5F

呃。。。。

炖猫术士 2014-06-17 18:32:43 4F

膜拜。不,五体投地。突感渺小。

云婣 2014-06-17 18:14:44 3F

   大神就是大神,好有想法