7 个实用的 JS Fiddle 示例

自定义复选框和单选按钮

丝带标签

自定义文件输入占位符

自定义选择字段

带重叠阴影的按钮

网格画廊

超级菜单悬停

分享一些 JSFiddle 示例，希望对大家有用。我经常用 JSFiddle 作为测试平台，在把 UI 代码片段应用到实际项目之前先进行测试。这些示例都是我自己做的，也参考了一些 Google 的资料。配色有点单调，请见谅；我不太擅长设计……总之，希望这些代码片段对大家有所帮助。

自定义复选框和单选按钮

自定义复选框和单选按钮。包含悬停效果。

我日常工作中有个项目需要创建自定义复选框。我已经有了实现思路，但需要验证一下。我在这里找到了渲染复选框的代码。我还决定附上一段单选按钮的代码，以备将来之需。

丝带标签

产品丝带标签。图片来自placeholder.com。

我最近的一个项目需要将产品标签设计成丝带样式。我尝试在网上寻找解决方案，但很多都过于复杂。最终，我找到了这个方案。我无法让伪元素在丝带的拐角处生效，所以最后我使用了一个内部 div 元素来实现效果。

自定义文件输入占位符

自定义文件输入占位符。此代码片段使用了jQuery。

我最近在日常工作中参与的一个项目需要一个文件输入框来上传客户的头像。原型设计中没有输入框标签，而是使用了属性placeholder作为输入框的标签。问题在于文件输入框类型无法渲染该placeholder属性。这个 fiddle 是我在搜索解决方案后找到的。

自定义选择字段

我经常会遇到需要更改下拉选择框箭头样式的设计。经过一番搜索，我找到了渲染箭头的代码。请记住将输入框的背景设置为透明。

带重叠阴影的按钮

我之前做过一个项目，按钮就是这种设计。以下是解决方案。

为了呈现透明效果，请确保inset box-shadow颜色与您的背景颜色相同background colour。

网格画廊

我日常工作中的一个项目需要搭建一个网格画廊。由于公司政策要求支持 IE11，我必须找到一个兼容 IE11 的解决方案。以下是我找到的方案。

我确信肯定有更好的方法来编写响应式网格，但这是我当时能想到的。

超级菜单悬停

此解决方案使用了jQuery。

我为其中一个项目需要制作一个大型菜单。这就是我的成果。