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 相关文章推荐
网页布局中CSS样式无效的十个重要原因详解
Aug 10 HTML / CSS
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
Jan 07 HTML / CSS
纯css3(无图片/js)制作的几个社交媒体网站的图标
Mar 21 HTML / CSS
可自定义箭头样式的CSS3气泡提示框
Mar 16 HTML / CSS
利用纯CSS3实现动态的自行车特效源码
Jan 20 HTML / CSS
css3 flex实现div内容水平垂直居中的几种方法
Mar 27 HTML / CSS
深入研究HTML5实现图片压缩上传功能
Mar 25 HTML / CSS
html5贪吃蛇游戏使用63行代码完美实现
Jun 25 HTML / CSS
HTML5打开手机扫码功能及优缺点
Nov 27 HTML / CSS
浅谈HTML5 Web Worker的使用
Jan 05 HTML / CSS
HTML5视频播放插件 video.js介绍
Sep 29 HTML / CSS
HTML利用九宫格原理进行网页布局
Mar 13 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
PHP脚本数据库功能详解(中)
2006/10/09 PHP
可定制的PHP缩略图生成程式(需要GD库支持)
2007/03/06 PHP
PHP传值到不同页面的三种常见方式及php和html之间传值问题
2015/11/19 PHP
yii2安装详细流程
2018/05/23 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
PHP使用PDO 连接与连接管理操作实例分析
2020/04/21 PHP
js prototype 格式化数字 By shawl.qiu
2007/04/02 Javascript
防止页面被iframe(兼容IE,Firefox火狐)
2010/07/04 Javascript
{}与function(){}选用空对象{}来存放keyValue
2012/05/23 Javascript
Javascript计算两个marker之间的距离(Google Map V3)
2013/04/26 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
2015/02/17 Javascript
js数组如何添加json数据及js数组与json的区别
2015/10/27 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
2015/12/04 Javascript
JS只能输入正整数的简单实例
2016/10/07 Javascript
纯JS打造网页中checkbox和radio的美化效果
2016/10/13 Javascript
js 打开新页面在屏幕中间的实现方法
2016/11/02 Javascript
详解nodejs 文本操作模块-fs模块(五)
2016/12/23 NodeJs
jQuery元素选择器实例代码
2017/02/06 Javascript
基于JS实现简单滑块拼图游戏
2019/10/12 Javascript
vue 微信扫码登录(自定义样式)
2020/01/06 Javascript
nuxt.js 在middleware(中间件)中实现路由鉴权操作
2020/11/06 Javascript
Python模仿POST提交HTTP数据及使用Cookie值的方法
2014/11/10 Python
使用PDB模式调试Python程序介绍
2015/04/05 Python
Python回调函数用法实例详解
2015/07/02 Python
Python实现自动添加脚本头信息的示例代码
2016/09/02 Python
Python中模块pymysql查询结果后如何获取字段列表
2017/06/05 Python
将python安装信息加入注册表的示例
2019/11/20 Python
英国布鲁姆精品店:Bloom Boutique
2018/03/01 全球购物
波兰家居和花园家具专家:4Home
2019/05/26 全球购物
德国前卫设计师时装在线商店:Luxury Loft
2019/11/04 全球购物
abstract 可以和 virtual 一起使用吗?可以和 override 一起使用吗?
2012/10/15 面试题
篮球比赛拉拉队口号
2014/06/10 职场文书
小学体育队列队形教学反思
2016/02/16 职场文书
mysql部分操作
2021/04/05 MySQL
springboot+VUE实现登录注册
2021/05/27 Vue.js
分享一个vue实现的记事本功能案例
2022/04/11 Vue.js