input输入框外联式样式控制不了字体

时间：2022-07-02 09:41:20

1、问题背景

在做项目过程中，发现input输入框利用外联样式，控制不了输入框的样式

2、问题原因

（1）HTML代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../css/common.css" />
	</head>
	<body>
		<input type="text" />
	</body>
</html>

（2）CSS代码 

input{
	font-family: "微软雅黑";
	font-size: 20px;
	color: #FF0000;
	text-align: center;
	width: 400px;
	height: 300px;
	vertical-align: middle;
}

3、解决办法

（1） 利用样式内嵌式，将样式代码写在元素内

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="text" style="font-family: '微软雅黑';font-size: 20px;color: #FF0000;width: 400px; height: 300px;text-align: center;vertical-align: middle;" value="100"/>
	</body>
</html>

（2）style标签嵌入式 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			input{
				font-family: "微软雅黑";
				font-size: 20px;
				color: #FF0000;
				width: 400px;
				height: 300px;
				text-align: center;
				vertical-align: middle;
			}
		</style>
	</head>
	<body>
		<input type="text" value="100"/>
	</body>
</html>

相关文章