跳到主要内容
CSS-Tricks
  • 文章
  • 笔记
  • 链接
  • 指南
  • 年鉴
  • 随机
搜索

文章标签
inputs

17 篇文章
{
,

}
文章“使用搜索输入类型可以得到什么?”的直接链接
inputs search

使用搜索输入类型可以得到什么?

像这样:<input type="search">

  1. 你会在 Safari 中得到一个额外的圆形外观,这曾经与 macOS 中搜索输入的外观匹配,但现在已经不再匹配了。我不讨厌这个外观,只是...
  2. Safari 完全忽略了你在...
…
Avatar of Chris Coyier
Chris Coyier 于 2021 年 11 月 18 日发布
文章“密码显示输入选项”的直接链接
inputs passwords security

密码显示输入选项

在 HTML 中,有一个非常明确的输入类型用于处理密码

<input type="password">

如果你使用它,当你在其中输入时,你会得到模糊的弹点,比如

••••••••

这是网络试图帮助提高安全性。如果...

Avatar of Chris Coyier
Chris Coyier 于 2021 年 10 月 8 日发布
文章“HTML 输入和标签:爱情故事”的直接链接
accessibility forms inputs labels semantics

HTML 输入和标签:爱情故事

大多数输入都有一个共同点——它们最喜欢与一个标签为伴!而幸福不止于此。具有正确输入和标签的表单更容易让人使用,这也会让人们感到高兴。…

Avatar of Amber Wilson
Amber Wilson 于 2021 年 4 月 2 日发布
文章“超级强化数字输入”的直接链接
inputs

超级强化数字输入

说到数字擦除(即为数字输入添加鼠标 UX),你也可以为数字输入添加更好的键盘命令。Kilian Valkhof 解释了他是如何为数字输入添加上下箭头以及修饰键的...

Avatar of Chris Coyier
Chris Coyier 于 2020 年 9 月 4 日发布
文章“用 CSS 创建无障碍范围滑块”的直接链接
accessibility inputs

用 CSS 创建无障碍范围滑块

无障碍技巧是使用<input type="range">并使用CSS 调整其形状,而不是放弃并使用 div 或其他东西重新构建它,然后忘记无障碍性。

最巧妙的例子使用了一个倾斜的linear-gradient 背景,使...

Avatar of Chris Coyier
Chris Coyier 于 2020 年 5 月 7 日发布
文章“更好的表单输入,带来更好的移动用户体验”的直接链接
autocomplete forms inputmode inputs ux

更好的表单输入,带来更好的移动用户体验

以下是一个简单实用的方法,可以让应用程序在移动设备上表现更好:始终使用正确的type、inputmode 和autocomplete 属性配置 HTML 输入字段。虽然这三个属性通常被孤立地讨论,但它们使...

Avatar of Alex Holachek
Alex Holachek 于 2020 年 4 月 27 日发布
文章“自动增长输入和文本区域”的直接链接
forms inputs

自动增长输入和文本区域

默认情况下,<input> 和<textarea> 元素不会根据其包含的内容改变大小。事实上,没有简单 HTML 或 CSS 方法可以让他们这样做。有点好笑,因为这似乎是一个合理的用例。但是...

Avatar of Chris Coyier
Chris Coyier 于 2020 年 3 月 25 日发布
文章“用现代 CSS 功能自定义样式表单输入”的直接链接
@supports checkboxes custom properties forms inputs radio buttons

用现代 CSS 功能自定义样式表单输入

现在完全可以构建自定义复选框、单选按钮和切换开关,同时保持语义化和无障碍性。我们甚至不需要一行 JavaScript 或额外的 HTML 元素!实际上,最近比过去更容易...

Avatar of Aaron Iker
Aaron Iker 于 2020 年 2 月 12 日发布
文章“多拇指滑块:通用情况”的直接链接
css variables custom properties inputs slider

多拇指滑块:通用情况

…
Avatar of Ana Tudor
Ana Tudor 于 2020 年 1 月 8 日发布
  • 1
  • 2
  • Older

CSS-Tricks 由 DigitalOcean 提供支持。

使用我们精心制作的时事通讯

随时了解 web 开发

DigitalOcean
  • 关于 DO
  • Cloudways
  • 法律事项
  • 获得免费积分!
CSS-Tricks
  • 为我们写作!
  • 与我们合作广告
  • 联系我们
社交
  • RSS 订阅
  • CodePen
  • Mastodon
  • X
返回顶部

© 2024 . All rights reserved.