如何用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" />

原文地址:https://www.cnblogs.com/yingyigongzi/p/9600124.html

时间: 2024-10-19 06:27:18

如何用html把文本框外观格式设为只显示底部的横线的相关文章

对文本框中输入的内容放大显示和格式化

在最近做的项目中,发现用户在输入手机号.身份证或者银行卡这些重要的数据的时候,文本框显示的文字不是非常大,也不是非常明显的显示给用户. 往往这些重要数据用户都需要核对好几次,在确保正确无误的时候才敢点击保存,这样总会浪费一点时间,对用户的体验也不是非常友好,如果我们能在用户输入框的上面对输入的内容进行放大.颜色突出并且按照不同的分隔显示,是不是这样更能便于用户快速的核实数据呢. 于是自己利用业务时间就动手封装了一个小插件: 第一步:创建一个样式表sytle.css 1 @charset "utf

如何解决谷歌浏览器保存密码后文本框出现淡黄色背景色的显示问题

示例: 解决方法: 给文本框添加内阴影,使内阴影足够大覆盖淡黄色区域: 1 box-shadow: 0 0 20px #fff inset!important; 2 -webkit-box-shadow: 0 0 20px #fff inset!important;

PPT文本框设置实用技巧分享

我们在制作PPT的过程中,几乎都要与文字打交道,文字一般都是在插入的文本框中输入的,通过输入文本框默认的文字与边框的距离,可以是文本框显得更加的美观:那么,具体是怎样操作的呢?下面将方法告诉大家! 主要有4个方法: 设置文本框间距.设置对齐方式.设置字符间距.设置行距.具体如下: 1.设置文本框间距 鼠标选中形状,然后右键-设置形状格式-文本框-左右上下边距设置为:0厘米. 2.设置对齐方式 鼠标选中形状-点击开始选项卡-选择两端对齐. 3.设置字符间距 鼠标选中形状-点击开始选项卡-字符间距-

使用Htmlhelper,创建文本框TextBox

下面通过HtmlHelper帮助类,创建文本框. 首先新建一个实体类,做为下面的例子: using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace MVCRestartlearnning.Models { public class Student { /// <summary> /// 学号 /// </summary> public int Stude

WPF 文本框添加水印效果

有的时候我们需要为我们的WPF文本框TextBox控件添加一个显示水印的效果来增强用户体验,比如登陆的时候提示输入用户名,输入密码等情形.如下图所示: 这个时候我们除了可以修改TextBox控件的控件模板之外,其实还有一种比较简单的方式来处理.就是为我们的TextBox控件添加一个触发器,当它的文本值为空并且当它没有焦点的时候,我们就修改TextBox控件的背景样式,我们将它的背景样式设置为VisualBrush,并且在VisualBrush中添加一个TextBlock控件来显示我们需要提示的水

vb.net机房收费 &amp; Register文本框为空提示,一键清空文本框所有内容

已经第二次机房收费系统重构了,一遍当然得有一遍的效果,正如对于文本框为空的提示方法,回顾第一遍机房,那些傻里傻气的If语句让自己对代码的亲和度大打折扣啊!那么到底有什么办法解决那些重复性的判断呢?这时候我们就要提到所谓的Model窗体了.在Model窗体中,建立一个封装数组,当窗体中需要判断大量文本框为空的时候,只需简单的调用即可. 新建一个Model类,来存放公共需要的部分. 1.定义一个结构体Term,且用结构体封装一个数组 Public Structure Term '定义结构体term

JS练习 改变文本框状态

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="

WPF文本框密码框添加水印效果

WPF文本框密码框添加水印效果 来源: 阅读:559 时间:2014-12-31 分享: 0 按照惯例,先看下效果 文本框水印 文本框水印相对简单,不需要重写模板,仅仅需要一个VisualBrush   和触发器验证一下Text是否为空即可. 上代码: <TextBox Name="txtSerachDataName" Width="120" Height="23" Grid.Column="3" Grid.Row=&q

winform中文本框的一些案例

项目中经常看到在输入金额时,会加逗号,最近在复习正则表达式,就联系下,界面如下: 首先,对上面的文本框输入值进行控制,只允许用户输入数字0-9,小数点和退格键,注册文本框的KeyPress事件,代码如下: 1 //输入值只能在数字0-9之间,允许输入小数点和退格键 2 if ((e.KeyChar < '0' || e.KeyChar > '9') && e.KeyChar != 8 && e.KeyChar != 46) 3 { 4 e.Handled = t