为什么在chrome下我的单选按钮设置宽高厚大小还是一直不变?我的chrome版本42,64bit,但是在火狐下按钮就变大了。老师的视频不就是在chrome下录制的么,为何相差这么大。。。有没有人和我遇到一样的问题啊?
在手机上设置宽高也不起作用啊 样子没变大 生效区域也没变大
这里并不是要他“看起来”变大了,而是要他的”生效区域“变大;有些浏览器,设置了宽高后,那个小按钮看起来没变大,但是实际上,他的作用范围是变大了的。你可以尝试一下鼠标点击他的旁边,不要点击那个小按钮,看看能不能选中按钮。如果能,那么这个效果就足够了。只要在你需要设置的范围内,点击鼠标,能够让他变成checked状态就行了。至于他看起来怎么样大小不重要。
原生单选按钮和多选按钮那么丑,样式还不好兼容,所以用图片代替吧
#raidobtn {
-webkit-appearance: none;
-moz-appearance: none;
}这样能实现大小一致,不过会破坏input text="radio"原有的样式。不推荐使用,你的问题应该是浏览器预编译出现的问题。期待大牛有更好的解决方式。
<!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上长这样:

chrome下长这样:

求帮忙。。。。