html中radio自定义样式怎么改成这样?网上没找到,都是比较简单的自定义样式,有点蒙。

html中radio自定义样式怎么改成这样?

企业微信截图_15913512324716.png
我写了默认的单选框样式,网上找了一下自定义radio,都是左边单选框有一些不一样,但还是右边文字,想要达成这样的效果要怎么改?男和女前面两个是小图标,不用管,主要是想要矩形文字居中的单选框样式。

阅读 3.2k
2 个回答

用其他标签模拟

你可以使用 chrome 的开发者工具, Element 标签查看对应的实现方式。

radio 的话就是一个小圆点,讲道理是改不成这样的。因为他的选中状态还设置到父级的样式

image.png

Element-ui 里面就有你说这样的 radio-button,你可以直接拿来用。
Radio Button
如果你想知道怎么做,也可以看它的源码。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题