                        课程
                    
                        /前端开发
                        
                            /CSS3
                        
                        /css3实现网页平滑过渡效果

chrome下单选按钮设置宽高不生效

为什么在chrome下我的单选按钮设置宽高厚大小还是一直不变？我的chrome版本42，64bit，但是在火狐下按钮就变大了。老师的视频不就是在chrome下录制的么，为何相差这么大。。。有没有人和我遇到一样的问题啊？

B10041104

2015-05-29

源自：css3实现网页平滑过渡效果 1-4

关注问题我要回答

2908

操作

收起

5 回答

戴眼镜的粉红兔子
2016-11-30

在手机上设置宽高也不起作用啊样子没变大生效区域也没变大

0 回复有任何疑惑可以回复我~

收起回答

qq_木头一个_0
2015-06-09

这里并不是要他“看起来”变大了，而是要他的”生效区域“变大；有些浏览器，设置了宽高后，那个小按钮看起来没变大，但是实际上，他的作用范围是变大了的。你可以尝试一下鼠标点击他的旁边，不要点击那个小按钮，看看能不能选中按钮。如果能，那么这个效果就足够了。只要在你需要设置的范围内，点击鼠标，能够让他变成checked状态就行了。至于他看起来怎么样大小不重要。

0 回复有任何疑惑可以回复我~

收起回答

♣衣锦
2015-05-31

原生单选按钮和多选按钮那么丑，样式还不好兼容，所以用图片代替吧

0 回复有任何疑惑可以回复我~

收起回答

Y_du
2015-05-29

#raidobtn {
-webkit-appearance: none; 
-moz-appearance: none;
}

这样能实现大小一致，不过会破坏input text="radio"原有的样式。不推荐使用，你的问题应该是浏览器预编译出现的问题。期待大牛有更好的解决方式。

0 回复有任何疑惑可以回复我~

收起回答

B10041104 提问者
2015-05-29

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#test{
background-color: #ccc;
border:1px solid red;
width: 200px;
height: 200px;
}
#radiobtn{
height: 100px;
width :100px;

}
</style>
</head>
<body>
<div id="test">
<input type="radio" id="radiobtn"> test</input>
</div>
</body>
</html>

代码如上，分别截图：

firefox上长这样：