1、问题背景

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

2、问题原因

（1）HTML代码

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 		<link rel="stylesheet" href="../css/common.css" />
  7. 	</head>
  8. 	<body>
  9. 		<input type="text" />
  10. 	</body>
  11. </html>

（2）CSS代码 

  1. input{
  2. 	font-family: "微软雅黑";
  3. 	font-size: 20px;
  4. 	color: #FF0000;
  5. 	text-align: center;
  6. 	width: 400px;
  7. 	height: 300px;
  8. 	vertical-align: middle;
  9. }

3、解决办法

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

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

（2）style标签嵌入式 

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 		<style>
  7. 			input{
  8. 				font-family: "微软雅黑";
  9. 				font-size: 20px;
  10. 				color: #FF0000;
  11. 				width: 400px;
  12. 				height: 300px;
  13. 				text-align: center;
  14. 				vertical-align: middle;
  15. 			}
  16. 		</style>
  17. 	</head>
  18. 	<body>
  19. 		<input type="text" value="100"/>
  20. 	</body>
  21. </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. python初识（二）

    目录: 进制 基本数据类型 整形 布尔值 字符串 列表 元祖 字典 集合 range & enumerate 一.进制 二进制转换十进制计算: 十进制:==47 一个字节公式:==128 64 ...

  2. linux/Mac使用du查看目录占用的磁盘大小

    [1]du命令用来查看目录或文件所占用磁盘空间的大小.常用选项组合为: du -sh [2]若要查看一个目录下每个文件和文件夹的磁盘占用空间,使用如下命令: du -ah --max-depth=1 ...

  3. Spark之Task原理分析

    在Spark中,一个应用程序要想被执行,肯定要经过以下的步骤:          从这个路线得知,最终一个job是依赖于分布在集群不同节点中的task,通过并行或者并发的运行来完成真正的工作.由此可见 ...

  4. centos7 lua安装

    yum -y install gcc automake autoconf libtool makeyum install readline-develcurl -R -O http://www.lua ...

  5. 2018-2019 ACM-ICPC, Asia Seoul Regional Contest

    ProblemA Circuits Solved. 题意: 有$n$个矩形,可以放两条平行与$x$轴的线,求怎么放置两条无线长的平行于$x$轴的线,使得他们与矩形相交个数最多 如果一个矩形同时与两条线 ...

  6. EF Code First 学习笔记:关系（转）

      一对多关系 项目中最常用到的就是一对多关系了.Code First对一对多关系也有着很好的支持.很多情况下我们都不需要特意的去配置,Code First就能通过一些引用属性.导航属性等检测到模型之 ...

  7. sqlserver create table

    ①sql 语句创建(项目使用) use sps_db go if exists(select name from sys.tables where name='event_profile_level2 ...

  8. Python 3 并发编程多进程之进程池与回调函数

    Python 3 进程池与回调函数 一.进程池 在利用Python进行系统管理的时候,特别是同时操作多个文件目录,或者远程控制多台主机,并行操作可以节约大量的时间.多进程是实现并发的手段之一,需要注意 ...

  9. ngular6开发不完全笔记（二）-- 管道

    自定义管道 管道(过滤器)为过滤数据显示下列list数据 pip.ts 文件 import { Pipe, PipeTransform } from '@angular/core'; import { ...

  10. VS2012 QT程序打包部署详解

    1.设置安装程序集 InstallShield安装完成后,执行以下步骤右键解决方案-->添加-->新建项目-->其他项目类型-->安装和部署,具体操作如下图: 2.发布程序 在 ...