chrome下单选按钮设置宽高不生效-慕课网

首页课程实战体系课手记专栏慕课教程

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

来源：1-4 使用radio制作导航（添加样式）

B10041104

2015-05-29 01:00

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

写回答关注

5回答

戴眼镜的粉红兔子

2016-11-30 10:49:18

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

0 0
qq_木头一个_0

2015-06-09 09:46:13

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

0 0
♣衣锦

2015-05-31 00:15:03

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

0 0
Y_du

2015-05-29 15:41:38
```
#raidobtn {
-webkit-appearance: none; 
-moz-appearance: none;
}
```
这样能实现大小一致，不过会破坏input text="radio"原有的样式。不推荐使用，你的问题应该是浏览器预编译出现的问题。期待大牛有更好的解决方式。
0 0

B10041104: 2015-05-29 01:23:28

<!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上长这样：