如何用html把文本框外观格式设为只显示底部的横线
html把文本框外观格式设为只显示底部的横线
<style>
input[type='text']{background:none;border:none;border-bottom:1px solid #ddd;}//所有input框类型为text的
.inp{background:none;border:none;border-bottom:1px solid #ddd;}
</style>
<input type="number" value="" class="inp"/>
参考:https://zhidao.baidu.com/question/1242984244365752339.html
设置图片居中
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<style>
*{
padding:0px;
margin:0px;
font-family:"微软雅黑";
} .homeback {
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
z-index: -1;
}
.div2 {
position: absolute;
}
@media screen and (max-width: 1100px) { /*当屏幕尺寸小于1100px时,应用下面的CSS样式*/
.icontype {
width:40%;margin-top:20%;margin-left:30%
}
.grouptype {
width:50%;margin-top:60%;margin-left:25%
} .checktype {
width: 35%;
margin-top: 90%;
margin-left: 58%
} .searchtype {
width: 30%;
margin-top: 68%;
margin-left: 33%
}
}
@media screen and (min-width: 1100px) { /*当屏幕尺寸大于1100px时,应用下面的CSS样式*/
.icontype {
width: 30%;
margin-top: 5%;
margin-left: 35%
} .grouptype {
width: 30%;
margin-top: 25%;
margin-left: 35%
} .checktype {
width: 20%;
margin-top: 40%;
margin-left: 58%
} .searchtype {
width: 15%;
margin-top: 32%;
margin-left: 42%
}
} .input2{
border: none;
background: none;
border-bottom: solid 1px #0c0c0c;
}
</style>
<img class="homeback" src="../Images/ECheck/背景拷贝.png" />
<img class="div2 icontype" src="../Images/ECheck/icon.png" />
$(function () {
$("#bodyground").css({ "width": screenwidth + "px", "height": screenwidth + "px" });
}); //获取屏幕总高度,宽度
var screenheight = window.screen.availHeight
var screenwidth = window.screen.availWidth
如何用html把文本框外观格式设为只显示底部的横线的更多相关文章
- js各种验证文本框输入格式
不能为空 <input onblur="if(this.value.replace(/^ +| +$/g,'')=='')alert('不能为空!')"> 只能输入英文 ...
- IOS中文本框输入自动隐藏和自动显示
uilabe和UIText扩展方法 +(UILabel*)LabWithFrame:(CGRect)_rect text:(NSString*)aText textColor:(UIColor*)aC ...
- 文本框/域文字提示(placeholder)自动显示隐藏jQuery小插件
// 文本框文本域提示文字的自动显示与隐藏 (function($){ $.fn.textRemindAuto = function(options){ options = options || {} ...
- CSS动态实现文本框清除按钮的隐藏与显示
当前现代浏览器中,Chrome浏览器下type=search的输入框会有清除按钮的动态呈现,不过搜索input框尺寸不太好控制(padding无视):FireFox浏览器貌似任何类型的输入框都无动于衷 ...
- C#环境下,文本框翻屏,怎么一直显示当前插入的内容!!!!!!!!!!!!!!!!
//-----------------------显示当前插入的位置------------------------ textBox3.SelectionStart = textBox3.Text.L ...
- 使用jquery实现文本框输入特效:文字逐个显示逐个消失反复循环
前两天看到某个网站上的输入框有个小特效:文字逐个显示,并且到字符串最大长度后,逐个消失,然后重新循环显示消失,循环显示字符串数组.我对这个小特效有点好奇,于是今天自己尝试用jquery写一个简单的小d ...
- [WPF]带下拉列表的文本框
控件我已经弄好了,代码比较多,所以没办法全面介绍. 一开始我是直接继承Selector类来实现,做是做出来了,不过发现性能不太好.于是,我就想着自己来实现.毕竟我是做给自己用的,也不考虑过多的东西,也 ...
- WPF 文本框添加水印效果
有的时候我们需要为我们的WPF文本框TextBox控件添加一个显示水印的效果来增强用户体验,比如登陆的时候提示输入用户名,输入密码等情形.如下图所示: 这个时候我们除了可以修改TextBox控件的控件 ...
- JS练习 改变文本框状态
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- [No000016B]清华maven库配置settings.xml
路径:"C:\Users\%USERNAME%\.m2\settings.xml" <settings xmlns="http://maven.apache.org ...
- NodeJS websocket qr based on location
https://juejin.im/post/5a5728436fb9a01c982c7d93 http://www.cnblogs.com/panhe-xue/p/5902108.html---br ...
- vmware为我们提供了三种网络工作模式,它们分别是:Bridged(桥接模式)、NAT(网络地址转换模式)、Host-Only(仅主机模式)。
原文来自http://note.youdao.com/share/web/file.html?id=236896997b6ffbaa8e0d92eacd13abbf&type=note 我怕链 ...
- [knowledge][linux][sysfs] sysfs文件系统
https://en.wikipedia.org/wiki/Sysfs http://man7.org/linux/man-pages/man5/sysfs.5.html https://www.ke ...
- 《Nginx - 指令》- Rewrite/If/Set
一:Rewrite - 概述 - flag 作用 - last / break 实现对 Url 的重写. - redirect / permanent 实现对 Url 的重定向. - 使用范围 - s ...
- select下拉菜单实现通过数据库查询来设置默认值
查询网上各种资料要不比较难理解,要么有问题,现有一种简单通俗的理解方法 思路:读取数据库数据1,数据2需用到select选择菜单,但是又想每次查看是都显示读数据库的默认信息 demo: {% for ...
- WARNING: firstResult/maxResults specified with collection fetch; applying in memory!
QueryTranslatorImpl @Override public List list(SessionImplementor session, QueryParameters queryPara ...
- 一个ajax请求,接收json数据
<a id="inviterDel" onclick="delInviter(${item.inviterAddId})">删除</a> ...
- rem : web app适配的秘密武器
css html { font-size: calc(100vw / 3.75) } jsdocument.documentElement.style.fontSize = $(document.do ...
- 前端 HTML 常用标签 head标签相关内容 title标签 网页的标题信息
title标签 <title>标签:在<title>和</title>标签之间的文字内容是网页的标题信息,它会显示在浏览器标签页的标题栏中. 可以把它看成是一个网页 ...