css中把文本框变成虚线

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

CSS可以帮助我们将文本框样式变成虚线,让网站看起来更加美观。以下是实现方法:/* 将文本框的边框设置成虚线样式 */ input[type= text ], input[type= email ],

CSS可以帮助我们将文本框样式变成虚线,让网站看起来更加美观。以下是实现方法:

/* 将文本框的边框设置成虚线样式 */
input[type="text"], input[type="email"], input[type="password"], textarea {
  border: dotted 2px #999;
}

/* 鼠标悬停在文本框上时,去除边框虚线 */
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, textarea:focus {
  outline: none;
  border-color: #666;
} 

上述代码将所有输入文本框的边框样式变成了虚线。 border属性的值使用dotted让边框变成虚线样式,且线条宽度为2px,边框颜色为#999。当鼠标悬停在文本框上时,边框颜色变成了#666,同时通过outline属性将边框虚线去除,使得整个样式更加简洁美观。

当然,上述代码可以根据需求进行更改。你可以根据自己的喜好,调整虚线的样式、粗细以及颜色。总之,使用CSS的虚线样式能够让网站变得更加美观和大方。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css中把文本框变成虚线

粉丝

0

关注

0

收藏

0

已有0次打赏