logo

该视频仅会员有权观看

立即开通课程「Web前端页面基础」权限。

¥
199
/ 年

CSS 设计表单样式

  • 打开文档样式,对form元素设置最大宽度300像素和内边距24像素。
  • 为form添加1像素黑色边框。
  • 设计不同类型input元素样式:文本型、邮箱型、密码型输入框,使用类型属性选择器和逗号分隔。
  • 为这些input添加统一样式:字体大小继承父元素,宽度100%,黑色1像素实线边框,内边距8像素。
  • 设置输入框焦点状态时无轮廓并增加阴影(四个像素,颜色为绿或黄)。
  • 设计按钮样式:光标为pointer,无边框,默认颜色黑底白字,内边距上下12像素左右24像素。
  • 单独为重置按钮设置:无背景、黑色文本、内阴影。
  • 为激活状态的按钮设置不透明度为0.8。
  • 设计包裹按钮元素的actions,展示为flex并设置边距。
  • 设计actions下的按钮宽度为100%。
  • 最后观察优化表单样式。