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

时间：2026-02-15 20:15:46

1、第一，看下我们百度经验下面，工具/原料下面的这个input效果

1、默认是灰边+白底

2、鼠标经过时，变成绿边+白底

这个效果，在软件客户端界面如何实现

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

2、第二，我们来讲下，上面的效果在软件UI中的实现方式

简单的input效果代码如下：

<body>

</body>

显示如下：

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

3、我们发现，边线的颜色和我们想要的效果不同

那么，如何修改input边线的颜色呢？

<style>

input {

border:#E1E1E1 1px solid;

background:#fff;

}

</style>

直接针对input给它加边线border的颜色值就可以了

注意：input的背景颜色要用 background:#fff;来设置～

比如说：background:red;背景颜色就变成红色，不能用background-color这个是不起作用的

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

4、第二，现在我们说下，当mouse焦点在input框中时，如何修改边线颜色

只要在样式中加入input焦点时的边线颜色就可以了

input:focus {

border:#5DC34A 1px solid;

}

现在效果就出来了

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

5、第三，接下来，我们再说另外一种效果，现在已经很常见了

效果就是：当鼠标经过时，input边发光效果

如图所示：

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

6、上图这种方式的实现方式，我们先来看下，是外边框发光～

重点是：外边框

也就是我们要用到outline这个css样式

说明：outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

可以按顺序设置如下属性：

1、outline-color

2、outline-style

3、outline-width

7、样式代码如下：

input:focus {

border-color:#5DC34A ;

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过渡效果

效果如下：

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

8、你可以试下

如果不添加 border-color:#5DC34A ;边线颜色会很淡的

如果不添加 transition: 没有过渡效果，变化会很生硬～

各种不同的参数数值你也可以改变，会有不同的变化啊～

htmlayout设计ui 基础篇：[18]自定义checkbox

htmlayout设计ui 基础篇：[20]button垂直对齐

htmlayout设计ui 基础篇：[13]元素与窗口同步

htmlayout设计ui 基础篇：[14]菜单选中态

htmlayout设计ui 基础篇：[11]super和sub使用