HTML5中input输入框默认提示文字向左向右移动的示例代码


Posted in HTML / CSS onSeptember 10, 2020

HTML5中input输入框默认提示文字向左向右移动首先演示input输入框代码

<style>
        * {
            margin: 0;
            padding: 0;
        }

        .sousuo {
            width: 458px;
            height: 34px;
            margin-left: 190px;
            margin-top: 200px;
            border: 2px solid red;
        }
    </style>
</head>

<body>
    <input class="sousuo" type="text" placeholder="请输入搜索内容...">
</body>

代码运行界面图

HTML5中input输入框默认提示文字向左向右移动的示例代码

重要的点来了

可以看到默认提示文字是紧紧靠着左边框的
我们为了美观需要把它往后移动 只需要在css中添加代码

text-indent: 20px;

下面我们看下加入代码后的运行界面

HTML5中input输入框默认提示文字向左向右移动的示例代码

到此这篇关于HTML5中input输入框默认提示文字向左向右移动的示例代码的文章就介绍到这了,更多相关html5 input输入框提示文字内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
利用CSS3的flexbox实现水平垂直居中与三列等高布局
Sep 12 HTML / CSS
Web前端绘制0.5像素的几种方法
Aug 11 HTML / CSS
CSS3的Border-radius轻松制作圆角
Dec 24 HTML / CSS
css3气泡 css3关键帧动画创建的动态通知气泡
Feb 26 HTML / CSS
纯css3实现的竖形无限级导航
Dec 10 HTML / CSS
结合CSS3的新特性来总结垂直居中的实现方法
May 30 HTML / CSS
CSS3 实现的加载动画
Dec 07 HTML / CSS
html Table 表头固定的实现
Jan 22 HTML / CSS
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
May 07 HTML / CSS
深入理解HTML的FormData对象
May 17 HTML / CSS
基于HTML5 的人脸识别活体认证的实现方法
Jun 22 HTML / CSS
奇妙的 CSS shapes(CSS图形)
Apr 05 HTML / CSS
HTML5输入框下拉菜单功能的示例代码
Sep 08 #HTML / CSS
boostrap modal 闪现问题的解决方法
Sep 01 #HTML / CSS
HTML5 SEO优化的一些建议
Aug 27 #HTML / CSS
Amaze UI 文件选择域的示例代码
Aug 26 #HTML / CSS
h5封装下拉刷新
Aug 25 #HTML / CSS
amazeui页面分析之登录页面的示例代码
Aug 25 #HTML / CSS
详解淘宝H5 sign加密算法
Aug 25 #HTML / CSS
You might like
一个颜色轮换的简单例子
2006/10/09 PHP
php URL验证正则表达式
2011/07/19 PHP
在windows平台上构建自己的PHP实现方法(仅适用于php5.2)
2013/07/05 PHP
保存到桌面、设为桌面且带图标的PHP代码
2013/11/19 PHP
phpstorm配置Xdebug进行调试PHP教程
2014/12/01 PHP
PHP实现电商订单自动确认收货redis队列
2017/05/17 PHP
Laravel下生成验证码的类
2017/11/15 PHP
Laravel Reponse响应客户端示例详解
2020/09/03 PHP
jQuery技巧总结
2011/01/01 Javascript
js获取height和width的方法说明
2013/01/06 Javascript
javascript标签在页面中的位置探讨
2013/04/11 Javascript
JQuery设置文本框和密码框得到焦点时的样式
2013/08/30 Javascript
JS中数组Array的用法示例介绍
2014/02/20 Javascript
jQuery动画效果图片轮播特效
2016/01/12 Javascript
浅谈javascript中的加减时间
2016/07/12 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
2016/10/11 Javascript
Vue中的scoped实现原理及穿透方法
2018/05/15 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
2019/09/21 Javascript
jQuery实现简单飞机大战
2020/07/05 jQuery
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
2020/07/30 Javascript
vue中的.$mount('#app')手动挂载操作
2020/09/02 Javascript
Python实现的人工神经网络算法示例【基于反向传播算法】
2017/11/11 Python
单链表反转python实现代码示例
2018/02/08 Python
tensorflow 20:搭网络,导出模型,运行模型的实例
2020/05/26 Python
pytorch查看通道数 维数 尺寸大小方式
2020/05/26 Python
使用Dajngo 通过代码添加xadmin用户和权限(组)
2020/07/03 Python
python+pygame实现坦克大战小游戏的示例代码(可以自定义子弹速度)
2020/08/11 Python
python如何实现DES加密
2020/09/21 Python
护理专业毕业生自荐信范文
2014/01/05 职场文书
暑期社会实践方案
2014/02/05 职场文书
总经理任命书
2014/03/29 职场文书
购房公证委托书(2014版)
2014/09/12 职场文书
代领报检证委托书范本
2014/10/11 职场文书
四风问题原因分析及整改措施
2014/10/24 职场文书
Python echarts实现数据可视化实例详解
2022/03/03 Python
Python用tkinter实现自定义记事本的方法详解
2022/03/31 Python