修改input输入框样式和点击时边框的改变

关于input输入框浏览器会有自带的样式,如何修改input输入框的样式和点击时的样式

操作方法

  • 01

    html的写法,有一个input文本框和一个input type=button的按钮。

  • 02

    input的基本样式书写,placeholder的样式也可以修改,主要去掉原有的input样式,加入自己的样式

  • 03

    点击时,input输入框样式改变,可以为点击时加入动画,点击输入框时有阴影和颜色。

  • 04

    最后成果展示

  • 05

    涉及到的知识点, 1 placeholder的样式修改 ,text-indent控制文字距离 2 input边框的样式修改 ,去掉原有样式 3 点击时边框颜色和阴影的变化 box-shadow内发光样式貌似比较好看 4 点击时会有动画加入

(0)

相关推荐

  • word2010中怎么使用画笔修改表格线条样式?

    用word2010绘制表格后,有时可能需要修改个别线条样式.这里介绍如何用word中的表格绘制画笔修改线条样式,以供参考. 1.先在要修改线条样式的表格内点击鼠标左键. 2.点击后,当活动光标在表格中 ...

  • word中如何利用画笔修改表格线条样式?

    用word2010绘制表格后,有时可能需要修改个别线条样式.这里介绍如何用word中的表格绘制画笔修改线条样式,以供参考. 步骤 1.先在要修改线条样式的表格内点击鼠标左键. 2.点击后,当活动光标在 ...

  • jquery怎么给input输入框赋值

    jquery是一个很强大的js库,可以把js简化,给input输入框赋值也是很简单的事情,下面小编就来教大家怎么用jQuery给input输入框赋值. 操作方法 01 新建一个html文档,可以用任何 ...

  • cad中如何绘制多线及修改多线样式

    在CAD中我们绘制图纸时,常常会用到到多线,根据不同的线型要求我们就需要对多线进行修改,下面我们就来看看cad中如何绘制多线及修改多线样式的吧. 操作方法 01 在桌面上双击CAD这款软件,打开CAD ...

  • 如何在word2013中修改尾注样式

    word2013中修改尾注样式的步骤如下: 步骤一:首先打开microsoft office2013的组件之一word,然后打开要进行编辑的文档. 步骤二:然后点击页面上方菜单中的[开始]选项卡,如图 ...

  • word2007如何修改外观主题样式?

    我们在打开word2007的时候,默认都是淡蓝色这个样式,看的时间长了,我们估计也想换换主题样式,下面介绍下如何修改主题样式,不会的朋友可以参考本文! 步骤 1.点击word中的左上角功能按钮,进入功 ...

  • 如何设置和修改小米9手机中接收通知时闪烁呼吸灯的颜色

    小米手机是我们常用的一款手机,颜值高,性能好,深受大家的欢迎,有的朋友想知道怎么设置和修改小米9手机中接收通知时闪烁呼吸灯的颜色,小编为大家介绍方法.具体如下:1. 首先,请大家在自己的手机中找到[设 ...

  • Word文档如何修改批注文字样式

    Word是现在十分常用的文件类型之一,有些用户想知道如何修改批注文字样式,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步打开电脑中需要编辑的Word文档.2. 第二步先选中相关文 ...

  • Word如何修改插入表格样式

    Word是现在十分常用的办公软件之一,有些新用户不知道Word如何修改插入表格样式,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步打开电脑中的Word文档.根据下图所示,小编以空 ...