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

待我称王封你为后i 2022-06-09 22:51 151阅读 0赞

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>

发表评论取消回复

表情：

评论列表（有 0 条评论，151人围观）

还没有评论，来说两句吧...

相关阅读

相关输入框input 修改placeholder样式

::-webkit-input-placeholder { / WebKit, Blink, Edge / } :-moz-placeholder {

客官°小女子只卖身不卖艺/ 2022年12月18日 07:59/ 0 赞/ 190 阅读

相关输入框input

input输入框在ie下高度显示不正常，并且里面的文字内容不居中显示解决方法：可以具体看百度首页这里简单说下： <span> <i

深藏阁楼爱情的钟/ 2022年07月16日 01:47/ 0 赞/ 333 阅读

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

1、问题背景在做项目过程中，发现input输入框利用外联样式，控制不了输入框的样式 2、问题原因（1）HTML代码 <!DOCTYPE

待我称王封你为后i/ 2022年06月09日 22:51/ 0 赞/ 152 阅读

相关控制input框输入数字

1.只能输入正整数 <input type="text" οnkeyup="if(this.value.length==1){this.value=this.val

男娘i/ 2022年05月25日 07:21/ 0 赞/ 326 阅读

相关修改input、textarea输入框placeholder样式

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {

青旅半醒/ 2022年04月13日 14:54/ 0 赞/ 727 阅读

相关 css样式内联式，外联式，嵌入式

1.外联式样式（属于外部样式表）特征： 1、有一个单独的CSS文件存在！\[如：001.css\] 2、首先，通过【格式】→【样式表连接】与CSS文件\[001.

柔光的暖阳◎/ 2022年02月23日 00:54/ 0 赞/ 314 阅读

相关修改input输入框的样式

直接上代码 <style> .input{ -web-kit-appearance:none; -moz-appearance: n

Love The Way You Lie/ 2021年12月24日 15:39/ 0 赞/ 691 阅读

相关 css样式之input输入框默认样式

帮朋友写个简单的课程设计，后面会贴出来，项目刚开始就遇到一个坑（给input输入框设定样式，但是，点击后会出现蓝色边框），之前写其他的项目时也遇到过，百度一下资料解决了，现在又

Love The Way You Lie/ 2021年12月24日 11:11/ 0 赞/ 959 阅读

相关 css外联样式

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl

比眉伴天荒/ 2021年12月11日 02:39/ 0 赞/ 280 阅读

相关 css - 设置input输入框的placeholder的颜色和字体等样式

兼容多个浏览器的写法： ::-webkit-input-placeholder { /Webkit browsers 谷歌/ color:

逃离我推掉我的手/ 2021年08月13日 11:12/ 0 赞/ 521 阅读