Input 某些样式不起作用。

qq_38136478 2018-02-22 09:56:45

input 元素，height margin等样式起作用，但是border,background, font-*等不起作用。小白问题，请勿见笑
<!DOCTYPE html>
<html lang='zh_cn'>
<head>
<title>javascript test</title>
<style>
input{
width:50%; //有效，但是居然只是作用于按钮，而文字部分在效果之外
border: 1px solid red; //无效；
}
input:checked{
background:red; //无效
margin:20px; //有效
font-size:30px; //无效
}
span{
border:1px solid green;
}
</style>
</head>

<body>

<input id="idiot" type="radio"> <span>Radio One</span> </input>
<input type="radio" checked="checked"> Radio Two </input>
<input type="checkbox"> Check One </input>
<input type="checkbox" checked="checked"> Check Two </input>

</body>

</html>

...全文

1133 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

qq_38136478 2018-02-22

打赏
举报

引用 2 楼 qq_38136478 的回复:

[quote=引用 1 楼 hf872914334 的回复:] 可以网上搜一下表单元素的用法，input是单标签元素，你在后面加个</input>骗谁呢，你用一个别的元素包裹文字，把样式设置在那个元素上

谢谢啊。我用错了，我改了，仍然不可以，你帮我看看。请把那个comment 去掉。 <!DOCTYPE html> <html lang='zh_cn'> <head> <title>javascript test</title> <style> input{ width:50%; height:20%;  background:blue;  border:2px solid black;  } input:checked{ background:red; margin:20px; } span{ border:1px solid green; } </style> </head> <body> <form action=""> <input type="radio"/> <span>Radio One</span> <input type="radio" checked="checked"/> Radio Two <input type="checkbox"/> Check One <input type="checkbox" checked="checked"/> Check Two </form> </body> </html> [/quote] 修正了一点错误

qq_38136478 2018-02-22

打赏
举报

引用 1 楼 hf872914334 的回复:

可以网上搜一下表单元素的用法，input是单标签元素，你在后面加个</input>骗谁呢，你用一个别的元素包裹文字，把样式设置在那个元素上

谢谢啊。我用错了，我改了，仍然不可以，你帮我看看。请把那个comment 去掉。 <!DOCTYPE html> <html lang='zh_cn'> <head> <title>javascript test</title> <style> input{ width:50%; height:20%;  background:blue;  border:2px solid black;  } input:checked{ background:red; margin:20px; } span{ border:1px solid green; } </style> </head> <body> <form action=""> <input type="radio"/> <span>Radio One</span> <input type="radio" checked="checked"/> Radio Two <input type="checkbox"/> Check One <input type="checkbox" checked="checked"/> Check Two </form> </body> </html>

hfhan_872914334 2018-02-22

打赏
举报

可以网上搜一下表单元素的用法，input是单标签元素，你在后面加个</input>骗谁呢

，你用一个别的元素包裹文字，把样式设置在那个元素上

天际的海浪 2018-02-22

打赏
举报

自定义radio和checkbox样式的方法


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
<style type="text/css">
input[type="radio"] {
	display: none;
}
input[type="radio"]+span {
	display: inline-block;
	width: 25px;
	height: 25px;
	vertical-align: middle;
	border-radius: 50%;
	border: 1px solid #999;
	background-color: #fff;
}
input[type="radio"]:checked+span {
	width: 15px;
	height: 15px;
	border: 6px solid #39f;
	background-color: #fff;
}
</style>
</head>
<body>
	<label><input type="radio" name="test" /><span></span>选项A</label><br />
	<label><input type="radio" name="test" /><span></span>选项B</label><br />
	<label><input type="radio" name="test" checked="checked" /><span></span>选项C</label><br />
</body>
</html>

天际的海浪 2018-02-22