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>

input输入框外联式样式控制不了字体的更多相关文章

  1. input输入框的各种样式

    输入框景背景透明: <input style="background:transparent;border:1px solid #ffffff"> 鼠标划过输入框,输入 ...

  2. 手机端实现6位短信验证码input输入框效果（样式及代码方法）

    微信移动端4位.6位.多位验证码密码输入框功能的实现代码,实现思路: 方案1: 写一个简单的input框. 评估:样式不好看,待定. 方案2: 就是用6个input框,每输入一个数字之后,切换到下一个 ...

  3. 设置input中placeholder的样式（placeholder设置字体）

    方法: 代码示例: .input::-webkit-input-placeholder { font-size: 3.73333333vw; color: #cccccc; } .input:-moz ...

  4. POI中设置Excel单元格格式样式（居中，字体，边框等）

    创建sheet什么的就不多说了,直接进入正题 HSSFCellStyle cellStyle = wb.createCellStyle();   一.设置背景色: cellStyle.setFillF ...

  5. 修改input输入框的样式

    直接上代码 <style> .input{ -web-kit-appearance:none; -moz-appearance: none; font-size:1.4em; height ...

  6. css样式之input输入框默认样式

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

  7. 控制input输入框光标的位置

    一:理解input, textarea元素在标准浏览器下两个属性selectionStart, selectionEnd. selectionStart: 该属性的含义是 选区开始的位置: selec ...

  8. 控制input输入框中提示信息的显示和隐藏的方法

    在运用html+css+javascrpt进行页面制作时,我们往往会遇到一些影响用户体验,而又容易被我们忽视的小细节.比如,input输入框中的提示信息,怎样才能根据对象获得和失去焦点而实现其显示和隐 ...

  9. 微信小程序基础之input输入框控件

    今天主要详写一下微信小程序中的Input输入框控件,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,同时,还需要设置不同样式的输入框,今天的代码中都要相应的使用. input输入框 ...

随机推荐

  1. Spark Streaming带状态更新

    带状态的更新是使用的updateStateByKey方法,里面传入一个函数,函数要自己写,注意需要设置checkpoint import org.apache.spark.streaming.kafk ...

  2. idea中使用Mybatis plugin

    一.安装. 1. 2. 二.使用. 1. 2.

  3. Java transient关键字的理解

    transient [ˈtrænziənt] adj. 短暂的; 转瞬即逝的; 临时的 n 临时旅客; 瞬变现象; 候鸟; 1. transient的作用及使用方法       我们都知道一个对象只要 ...

  4. 全新办公方式，iClap引领企业级服务新浪潮

    随着企业级服务,SaaS市场的飞速发展,国内市场上,伴随着“马云又一个反人类的社交梦-钉钉”的出现与强势推广,企业协同办公类的产品被不断的呈现在企业的视线中,一时间,似乎我们传统的工作方式好像已经成了 ...

  5. 2018 Multi-University Training Contest 6 Solution

    A - oval-and-rectangle 题意:给出一个椭圆的a 和 b,在$[0, b]中随机选择c$ 使得四个顶点在椭圆上构成一个矩形,求矩形周长期望 思路:求出每种矩形的周长,除以b(积分) ...

  6. EditPlus 4.3.2463 中文版已经发布（10月16日更新）

    距离上个版本在本年5月发布后,EditPlus 网站沉寂多月.日前终于发布了一个新的小版本. 该版本却具有多项改进,值得一提: * Ctrl+Alt+Up/Down 键在列选模式下可插入多个插入点. ...

  7. 《Python网络编程基础》第四章 域名系统

    域名系统(DNS) 是一个分布式的数据库,它主要用来把主机名转换成IP地址.DNS以及相关系统之所以存在,主要有以下两个原因:   它们可以使人们比较容易地记住名字,如www.baidu.com. 它 ...

  8. [one day one question] 有没有免费接收短信验证用于注册的软件或者平台？

    问题描述: 想要批量注册撸羊毛,有手机短信验证码验证,这怎么破? 解决方案: 免费的肯定没有的,不过"一条短信收费一毛钱"倒是有一个,本人是亲自试用过,该平台收不到短信验证码不收费 ...

  9. 使用ShellExecute打开目标文件所在文件夹并选中目标文件

    转载:http://blog.csdn.net/chenlycly/article/details/7366364 转载:http://bbs.csdn.net/topics/50440550 She ...

  10. 从0开始学习 GITHUB 系列之「团队合作利器 BRANCH」【转】

    本文转载自:http://stormzhang.com/github/2016/07/09/learn-from-github-from-zero6/ 版权声明:本文为 stormzhang 原创文章 ...