不使用js实现点击文字选中radio

前些天去面试被问道怎么不使用js实现点击radio旁边的文字选中radio。当时比较急没想出来。今天有空搞一搞。把radio设置成inline-block,然后设置radio大小再在里面放上文字不就行了。本来想在里面放文字但发现不行。所以就用绝对定位把文字放在里面。再把文字设置在radio的下一层就行了。小demo(火狐):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Feed Viewer</title>
<style type="text/css">
</style>
<script>

</script>
</head>
<body>
<input style="width:200px;padding-right:100px" type="radio" name="sex" value="male"/>
<p style="position:absolute;left:120px;top:-10px;z-index:-1;">click me</p>
</body>
</html>

posted @ 2012-09-17 23:08  plusice  阅读(412)  评论(0编辑  收藏  举报