css输入框样式 css 输入框

使用:focus伪类可以自定义焦点样式的输入框，通常先去掉outline再设置border-color和box-shadow，如input: focus { outline: none； border-color： #007bff； box-shadow： 0 0 5px rgba(0, 123, 255, 0.5)； }，并且可以通过transition提升交互体验，适用于input、textarea等元素。

当用户点击输入框时，浏览器默认添加一个焦点状态框，我们可以通过CSS:focus伪类自定义这个状态的样式，比如改变边框颜色、背景颜色或者阴影效果等属性来实现。示例代码：

input：focus {lt；brgt； outline：2px solid blue；lt；brgt； border-color： blue；lt；brgt；} 登录后复制

注意：大多数浏览器默认使用outline显示focus样式，如果想完全控制样式，可以先移除outline再自定义。

通义万相

通义万相，一个进进进行 AI 艺术艺术创作大模型 596 查看详情 推荐写法：

input {lt；brgt； border： 1px solid #ccc；lt；brgt； padding： 8px；lt；brgt； border-radius： 4px；lt；brgt； transition：all 0.3s ease；lt；brgt；}lt；brgt；lt；brgt；input：focus {lt；brgt； outline：none； /* 移除默认轮廓 */lt；brgt； border-color： #007bff；lt；brgt； box-shadow： 0 0 5px rgba(0，123，255，0.5)；lt；brgt；} 登录后复制

我在这里添加了一个过渡，使颜色变化更平滑，提高用户体验。支持多个input元素

以上样式不仅适用于 lt；inputgt；，还可以扩展到 lt；textareagt； 和影片 contenteditable 的元素。统一设置示例：

input：focus，lt；brgt；textarea：focus {lt；brgt； outline： none；lt；brgt； border-color： #28a745；lt；brgt； box-shadow： 0 0 6px rgba(40, 167, 69, 0.3)；lt；brgt；} 登录后复制

基本上就是这些了，通过调整焦点状态的样式，可以让交互表格更加清晰直观，同时保持界面美观。关键是合理使用outline、border和box-shadow，并注意可访问性——确保焦点状态仍然清晰可见。