htmlayout设计ui 基础篇：[19]input框自定义

2024-10-13 14:40:35

1、第一，看下我们百度经验下面，工具/原料下面的这个input效果1、默认是灰边+白底2、鼠标经过时，变成绿边+白底这个效果，在软件客户端界面如何实现

2、第二，我们来讲下，上面的效果在软件UI中的实现方式简单的input效果代码如下：<body><input type="text" style="width:290px;"/></body>显示如下：

3、我们发现，边线的颜色和我们想要的效果不同那么，如何修改input边线的颜色呢？<style>input { border:#E1E1E1 1px solid; background:#fff; }</style>直接针对input给它加边线border的颜色值就可以了注意：input的背景颜色要用background:#fff;来设置～比如说：background:red;背景颜色就变成红色，不能用background-color这个是不起作用的

4、第二，现在我们说下，当mouse焦点在input框中时，如何修改边线颜色只要在样式中加入input焦点时的边线颜色就可以了input:focus { border:#5DC34A 1px solid; }现在效果就出来了

5、第三，接下来，我们再说另外一种效果，现在已经很常见了效果就是：当鼠标经过时，input边发光效果如图所示：

6、上图这种方式的实现方式，我们先来看下，是外边框发光～重点是：外边框也就是我们要用到outline这个css样式说明：outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。可以按顺序设置如下属性：1、outline-color2、outline-style3、outline-width

7、样式代码如下：input:focus { border-color:#5D觊皱筠桡C34A ; outline:5px glow #5DC34A -1px; transition: outline(linear,0.25s) border-color(linear,0.25s); }代码说明：1、border-color:#5DC34A ;边线颜色值2、outline:5px glow#5DC34A-1px;外边线发光效果3、transition: outline(linear,0.25s) border-color(linear,0.25s); CSS过渡效果效果如下：

8、你可以试下如果不添加 border-color:#5DC34A ;边线颜色会很淡的如果不添加 transition:没有过渡效果，变化会很生硬～各种不同的参数数值你也可以改变，会有不同的变化啊～