input输入框外联式样式控制不了字体
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输入框外联式样式控制不了字体的更多相关文章
- input输入框的各种样式
输入框景背景透明: <input style="background:transparent;border:1px solid #ffffff"> 鼠标划过输入框,输入 ...
- 手机端实现6位短信验证码input输入框效果(样式及代码方法)
微信移动端4位.6位.多位验证码密码输入框功能的实现代码,实现思路: 方案1: 写一个简单的input框. 评估:样式不好看,待定. 方案2: 就是用6个input框,每输入一个数字之后,切换到下一个 ...
- 设置input中placeholder的样式(placeholder设置字体)
方法: 代码示例: .input::-webkit-input-placeholder { font-size: 3.73333333vw; color: #cccccc; } .input:-moz ...
- POI中设置Excel单元格格式样式(居中,字体,边框等)
创建sheet什么的就不多说了,直接进入正题 HSSFCellStyle cellStyle = wb.createCellStyle(); 一.设置背景色: cellStyle.setFillF ...
- 修改input输入框的样式
直接上代码 <style> .input{ -web-kit-appearance:none; -moz-appearance: none; font-size:1.4em; height ...
- css样式之input输入框默认样式
帮朋友写个简单的课程设计,后面会贴出来,项目刚开始就遇到一个坑(给input输入框设定样式,但是,点击后会出现蓝色边框),之前写其他的项目时也遇到过,百度一下资料解决了,现在又碰到了,写一下,留着备用 ...
- 控制input输入框光标的位置
一:理解input, textarea元素在标准浏览器下两个属性selectionStart, selectionEnd. selectionStart: 该属性的含义是 选区开始的位置: selec ...
- 控制input输入框中提示信息的显示和隐藏的方法
在运用html+css+javascrpt进行页面制作时,我们往往会遇到一些影响用户体验,而又容易被我们忽视的小细节.比如,input输入框中的提示信息,怎样才能根据对象获得和失去焦点而实现其显示和隐 ...
- 微信小程序基础之input输入框控件
今天主要详写一下微信小程序中的Input输入框控件,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,同时,还需要设置不同样式的输入框,今天的代码中都要相应的使用. input输入框 ...
随机推荐
- jQuery Form
https://github.com/jquery-form/form#type 概念 jQuery表单插件允许您轻松,无差错地升级HTML表单以使用AJAX. 主要方法ajaxForm和ajaxSu ...
- 用Python实现的数据结构与算法:双端队列
一.概述 双端队列(deque,全名double-ended queue)是一种具有队列和栈性质的线性数据结构.双端队列也拥有两端:队首(front).队尾(rear),但与队列不同的是,插入操作在两 ...
- 3.3 Templates -- Conditionals(条件语句)
有时候你可能仅仅想展现模板的一部分,如果属性存在的话. 1. 我们可以使用{{if}}去有条件的渲染一块: {{#if person}} Welcome back, <b>{{person ...
- 特定于类的内存管理---《C++必知必会》 条款36
我们可以量身定制 operator new 和 operator delete 用于某个类类型,而不是必须使用标准版的 operator new 和 operator delete. 注意:我们不可以 ...
- MyBatis—动态SQL
什么是动态SQL? 1.基于OGNL表达式 2.完成多条件查询的逻辑 3.动态SQL的主要元素 (if,trim,where,set,choose,foreach) where标签 可以根据if中是否 ...
- spark环境安装
源码包下载: http://archive.apache.org/dist/spark/spark-2.1.1/v 集群环境: master 192.168.1.99 slave1 192.168.1 ...
- Linux Makefile
动态库: gcc getmaxlen.c –fPIC –shared –o libtest.so ldd -r libtest.so 静态库: ar crv libfirst.a testlib ...
- python使用cx_Oracle连接oracle
1.使用pip命令安装cx_Oracle $ pip install cx_Oracle 2.安装oracle客户端,并添加到path 下载路径: http://www.oracle.com/tech ...
- 正在尝试解析依赖项“MvvmLightLibs (≥ 5.2.0.0)”。 “MvvmLightLibs”已拥有为“CommonServiceLocator”定义的依赖项
正在尝试解析依赖项"MvvmLightLibs (≥ 5.2.0.0)". "MvvmLightLibs"已拥有为"CommonServiceLoca ...
- 【OpenCV学习笔记】三十、轮廓特征属性及应用(七)—位置关系及轮廓匹配
http://blog.csdn.net/abc8730866/article/details/69219992 轮廓特征属性及应用(七)—位置关系及轮廓匹配 1.计算点与轮廓的距离及位置关系——po ...