开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

我希望在输入为焦点或有效时将输入边框底边框更改为蓝色

你可以通过使用CSS样式来实现在输入为焦点或有效时将输入边框底边框更改为蓝色。以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
input:focus, input:valid {
  border-bottom: 2px solid blue;
}
</style>
</head>
<body>

<input type="text" placeholder="输入内容">

</body>
</html>

在上述代码中，我们使用了CSS伪类选择器:focus和:valid来匹配输入元素的焦点和有效状态。当输入元素被聚焦或者输入内容有效时，我们将其底部边框的样式改为蓝色。

注意，这只是一个基本的示例，实际应用中你可能需要根据具体情况进行调整和完善。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

当心理学遇上设计：格式塔原理是如何服务于设计的？

我始终坚信，心理学和设计的完美结合可以创造出非常好的用户体验。作为设计师，我们的职业目的就是解决用户需求，在这个过程中，我们往往会产生和用户一样的同理心。而当我更加深入地研究心理学对于设计工作的影响时，某一天，我终于恍然大悟，发现格式塔心理学原理可以和设计完美结合。

01

关于无障碍设计的七件事

作者简介：Jesse Hausler，Salesfoce无障碍设计专家。旨在通过教育大家「通用设计」来实现为所有用户而设计。

03

C# —— 点击按钮动态打开ComboBox

网上搜索了好多资料，大多是重绘ComboBox或者使用自定义控件创建一个全新的ComboBox（并非基于window的ComboBox）。

01

如何去掉antd中Input、Textarea组件获取焦点时的蓝色边框

Ant Design 的 Input 输入框组件在获取焦点时会有蓝色的边框，尝试用 outline:none 去掉这个边框，但是发现不管用。

03

Android开发实现去除bitmap无用白色边框的方法示例

本文实例讲述了Android开发实现去除bitmap无用白色边框的方法。分享给大家供大家参考，具体如下：

02

Spread for Windows Forms快速入门(16)---用Spread设计器创建和编辑图表

Spread支持85种丰富多彩的图表效果。可以在Spread设计器中基于工作表的数据直接生成图表，操作简单。同时，软件人员还可以在Visual Studio设计环境中定制图表的所有元素，包括标题、序列、轴、样式、图例等。这一篇介绍如何用Spread设计器创建和编辑图表。准备图表的数据首先要启动Spread设计器。你可以在 Visual Studio .NET 中鼠标右键点击 Spread 控件，在弹出菜单中选择 Spread 设计器；也可以在安装菜单中启动独立运行的Spread 设计器。在Spread

08

Fabric.js 自定义选框样式

框选是 fabric.js 默认提供的一种操作，fabric.js 提供了几个属性可以设置选框样式。

02

Imooc之Html与CSS

1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。

02

大胆尝试这些新的CSS属性，释放CSS的力量吧（一）

本文章系《Unleashing the Power of CSS》（释放CSS的力量，暂且这么翻译吧）一书的学习笔记，希望通本书的学习，系统的梳理下CSS相关的高级新特性。本篇文章是其第一部分，由于全书英文版，理解和阅读会有偏差，欢迎各位大佬们指正，我们一起共同提高。

02

Flutter 全栈式——基础控件

当输入框的默认线框无法满足时，可以使用Container容器自定义边框。这时候可以将装饰器设置为InputDecoration.collapsed(hintText: 'hint')表示禁用装饰线

04

iOS-UITextField 全面解析iOS中UITextField 使用全面解析UITextField的代理方法通知UITextField 在storyboard 中设置属性

iOS中UITextField 使用全面解析建议收藏，用到的时候来这里一查就都明白了 //初始化textfield并设置位置及大小 UITextField *text = [[UITextField alloc]initWithFrame:CGRectMake(20, 20, 130, 30)]; //设置边框样式，只有设置了才会显示边框样式 text.borderStyle = UITextBorderStyleRoundedRect; typedef NS_ENUM(NSInteger, UI

06

Android如何自定义EditText光标与下划线颜色详解

最近在写些小Demo复习基础，在用到EditText的时候突然发现之前几乎没有注意到它的光标和下划线的颜色，于是花了不少时间，看了不少博客，现在就来总结和分享一下收获，话不多说了，来一起看看详细的介绍：

05

图表做的好，工资少不了！百分比圆环图详细讲解！

上期讲解了如何制作玫瑰图：老板又说你做的图表太丑了，快试试这款高大上的南丁格尔玫瑰图吧！

03

react native简单入门

只执行一次： constructor、componentWillMount、componentDidMount 执行多次：render 、子组件的componentWillReceiveProps、componentWillUpdate、componentDidUpdate 有条件的执行：componentWillUnmount（页面离开，组件销毁时）不执行的：根组件（ReactDOM.render在DOM上的组件）的componentWillReceiveProps（因为压根没有父组件给传递props）

01

[Chrome 83]谷歌浏览器升级后对表单控件和焦点元素黑框取消掉方法，磕碜啦啦的难看死了-chrome://flags/#form-controls-refresh

最新发布的 Chrome 83 对表单控件进行了视觉效果的更新，其中对焦点元素的处理引起了众人的关注，当文本输入框处于焦点以及选定下拉菜单中的选项时，浏览器会在它们周围显示一个“黑框”，以突出表单中的这些内容。

04

教程 | Python 实现 Word 文档操作...

我们在Word中输入文字时，一般会先使用鼠标点击需要输入文字的位置，这个过程是获得了光标焦点。

02

【愚公系列】2023年11月 Winform控件专题 Label控件详解

Winform控件是Windows Forms中的用户界面元素，它们可以用于创建Windows应用程序的各种视觉和交互组件，例如按钮、标签、文本框、下拉列表框、复选框、单选框、进度条等。开发人员可以使用Winform控件来构建用户界面并响应用户的操作行为，从而创建功能强大的桌面应用程序。

01

《CSS揭秘》读书总结：背景与边框

假设我们想给一个容器设置一层白色背景和一道半透明白色边框，body 的背景会从它的半透明边框透上来。我们最开始的尝试可能是这样的：

04

OK（温健）：PPT矢量光束（超级渐变）

春节期间我分享了一张流浪地球主题的PPT壁纸，很多盆友们表示想学行星发动机光束的做法，于是本次我们分享一下怎么在PPT中制作矢量光束

00

vertical-align 属性，你了解嘛？？

最近遇到了奇怪问题，让我仔细的去了解了vertical-align的基线baseline对齐

01

每个前端开发需要了解的10个强大的CSS属性

快来免费体验ChatGpt plus版本的，我们出的钱体验地址:https://chat.waixingyun.cn 可以加入网站底部技术群，一起找bug，另外新版作图神器已上线 https://cube.waixingyun.cn/home

02

十六年全栈开发者的 Android 开发踩坑实录

这是一个完完全全马后炮的故事。身为拥有差不多十六年开发经验的全栈 web 开发者，作者对构建 web 应用所需要的各种技术可谓是了如指掌。而在最近几年的工作项目中，作者第一次成为了一名安卓开发者。在经过一段时间的磨合之后，作者才意识到，从 web 开发转型到安卓、移动端应用开发，开发者的思维也需要一定转换。

04

Qt 常用类（9）—— QWidget

http://blog.csdn.net/hmsiwtv/article/details/7562015

01

使用 SetWindowCompositionAttribute 来控制程序的窗口边框和背景（可以做 Acrylic 亚克力效果、模糊效果、主题色效果等）

Windows 系统中有一个没什么文档的 API，SetWindowCompositionAttribute，可以允许应用的开发者将自己窗口中的内容渲染与窗口进行组合。这可以实现很多系统中预设的窗口特效，比如 Windows 7 的毛玻璃特效，Windows 8/10 的前景色特效，Windows 10 的模糊特效，以及 Windows 10 1709 的亚克力（Acrylic）特效。而且这些组合都发生在 dwm 进程中，不会额外占用应用程序的渲染性能。

06

android基础

布局基本布局 FrameLayout 线性布局 LinearLayout 相对布局 RelativeLayout 绝对布局 AbsduteLayout 表格布局 TableLayout 标签布局 TabLayout

02

SwiftUI：自定义 Shape 使用 InsettableShape 协议实现向内绘制边框

如果创建的形状没有特定大小，它将自动扩展以占据所有可用空间。例如，这将创建一个填充我们视图的圆，并为其提供40点蓝色边框：

04

自动驾驶中单目摄像头检测输出3-D边界框的方法概述

本文是来自黄浴博士的知乎专栏，主要讲述了在自动驾驶中单目摄像头检测输出3D边界框的相关论文分享。其中涉及的论文都是值得相关研究者一睹为快。本文已获得黄浴博士授权，未经原作者许可不得转载。该文章知乎地址为https://zhuanlan.zhihu.com/p/57029694。在此群主总结整理分享给大家。同时希望大家能够积极参与分享。

02

CSS盒模型及边距问题

盒模型是CSS的基石之一，页面的每一个元素都被看作一个矩形框，分别由外边距，边框，内边距，内容组成，

02

[WPF 自定义控件]自定义一个“传统”的 Validation.ErrorTemplate

数据绑定模型允许您将与您Binding的对象相关联ValidationRules。如果用户输入的值无效，你可能希望在应用程序用户界面 (UI) 上提供一些有关错误的反馈。提供此类反馈的一种方法是设置Validation.ErrorTemplate附加到自定义ControlTemplate的属性。

04

Android开发笔记（一百四十六）仿支付宝的支付密码输入框

编辑框EditText算是Android的一个基础控件了，表面上看，EditText只负责接收用户手工输入的文本；可实际上，要把这看似简单的文本输入做得方便易用，并不是一个简单的事情。因为用户可能希望App会更加智能一些，比如用户希望编辑框提供关键词联想功能，又比如用户希望编辑框能够自我纠错等等；所以，Android从设计之初就努力尝试解决这些问题，先是自带了自动完成编辑框AutoCompleteTextView，后来又在Android5.0以后提供了文本输入布局TextInputLayout。然而，计划赶不上变化，开发工作中总有一些现有控件无法直接实现的需求，就像支付宝的支付密码输入框，在一排方格区域内输入并显示密文密码，每个密文字符之间又有竖线分隔。为直观理解支付密码输入框的业务需求，下面还是先看看该输入框的最终效果图。

03

flutter 输入框组件TextField的实现代码

顾名思义文本输入框，类似于iOS中的UITextField和Android中的EditText和Web中的TextInput。主要是为用户提供输入文本提供方便。相信大家在原生客户端上都用过这个功能，就不在做具体介绍了，接下来还是具体介绍下Flutter中TextField的用法。

01

当鼠标聚焦时输入框变色（focus事件实例）

图片.png 当鼠标聚焦时输入框变色 css相关,鼠标点击<input>输入域后出现有颜色的边框原理：css伪类之input输入框鼠标点击边框变色效果伪类元素的使用：:focus 一：当输入框获得焦点时，改变它的背景色效果图：当鼠标聚焦时输入内部填充色改变图片.png <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>鼠标点击<input>输入域后出现有颜色的边框</title> <style type="text/css"

03

Android layout属性大全

第一类：属性值 true或者 false android:layout_centerHrizontal 水平居中　　 android:layout_centerVertical 垂直居中 android:layout_centerInparent 相对于父元素完全居中　　 android:layout_alignParentBottom 贴紧父元素的下边缘　　 android:layout_alignParentLeft 贴紧父元素的左边缘　　 and

09

scetch入门第2部分：文本，对齐和SVG在第3部分中了解如何导出文件

这是本教程第1部分的延续。在本部分中，我们将介绍文本工具，对齐以及在Sketch中使用导入的矢量图形。

03

学习《CSS选择器Level-4》不完全版

选择器是CSS的核心组件。本文依据W3C的Selectors Level 4规范，概括总结了Level1-Level4中绝大多数的选择器，并做了简单的语法说明及示例演示。希望对程序员有所助益。

02

无障碍设计

优秀的无障碍设计，不仅能让残疾人用户正常地与产品交互；还会为普通人提供更好的使用体验。

06

[视频号]不用编程也能动态显示/隐藏提示

有时候，我们想在工作表中放置一些操作提示，在用户需要时显示，不需要时可以隐藏，但又不想使用VBA，那该怎么办呢？

03

【Flutter 专题】65 图解基本 TextField 文本输入框 (二)

和尚刚学习了 TextField 的基本用法，今天特意学习一下 TextField InputDecoration 文本框装饰器的相关内容；

04

wxss学习《五》所有以a，b开头的属性

整理下小程序里所有的css属性吧，这样也能好查询，按照字母表列举： a 共有15个属性：其中9个为动画animation的属性。详情如下： 1.additive-symbols:附加符号。Counte

08

【2020HBU天梯赛训练】7-20 心理阴影面积

这是一幅心理阴影面积图。我们都以为自己可以匀速前进（图中蓝色直线），而拖延症晚期的我们往往执行的是最后时刻的疯狂赶工（图中的红色折线）。由红、蓝线围出的面积，就是我们在做作业时的心理阴影面积。

04

从0开始编写一个开关组件

开关按钮似乎是开发人员和设计师最喜欢的展示他们的动画、设计和双关语技能的方式。甚至还有一个专门用于开关按钮的Codepen集合。

02

勇闯44关深入浅出CSS基础之第一篇

欢迎回来三钻的FCC前端教程，上一篇文章我们通过28关学会了HTML与HTML5网页开发基础。这一期我们一起攻破前端第二大知识点《CSS基础入门》。因为这一课一共有44关，我把文章分成两期更新。敬请期待！

01

【GPLT】L1-060 心理阴影面积

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

03

高级CSS技巧：7个选择器，无限设计可能性

在不断发展的 Web 开发世界中，掌握 CSS（层叠样式表）对于创建令人惊叹的响应式网站至关重要。虽然您可能熟悉 CSS 的基础知识，但仍有大量高级 CSS 选择器等待着提高您的编码技能并增强您的网页设计能力。在本博客中，我们将探讨每个 Web 开发人员都应该了解的七个高级 CSS 选择器。这些选择器将帮助您简化代码，提高可维护性，并使您的网站在视觉上更具吸引力。

04

边框样式的写法总结

今天在群里讨论了border的样式写法，发现border的写法还真是灵活，做了一下总结，希望对大家有用：

02

如何使用CSS伪类选择器

原文链接：https://www.sitepoint.com/css-is-where-has-pseudo-class-selectors/[1]

04

使用chrome调试CSS

chrome devtools 是前端开发再也熟悉不过的调试工具了。那么我们究竟有多了解它，这里总结了一些常用的CSS调试操作。

02

收藏 | 移动端H5开发常用技巧总结

在 iOS Safari （其他浏览器和 Android 均不会）上会对那些看起来像是电话号码的数字处理为电话链接，比如：

02

【愚公系列】2023年11月 Winform控件专题 Button控件详解

Winform控件是Windows Forms中的用户界面元素，它们可以用于创建Windows应用程序的各种视觉和交互组件，例如按钮、标签、文本框、下拉列表框、复选框、单选框、进度条等。开发人员可以使用Winform控件来构建用户界面并响应用户的操作行为，从而创建功能强大的桌面应用程序。

01

如何用Scratch 3绘制矢量图形【Gaming】

Scratch是一种流行的用于创建视频游戏和动画的可视化编程语言。它还具有矢量绘图工具，任何人都可以使用它来创建独特的游戏和艺术。

00

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭