HTML之表单类控件、图像类元素的CSS特别样式汇总

时间：2024-10-02 16:33:14

前言

记录下开发过程中一些特殊表单控件（input、textarea、select等）的样式控制

input

  • 取消光标聚焦时，输入框的外延边框
    • input:focus{ outline:none }
  • 取消默认边框
    • input{border:none}

textarea

  • 换行
    • HTML方式：文本中加【& # 10;】or【& # 13;】符号
      • < textarea >文本段落一
        文本段落二< / textarea >
    • JavaScript方式：在textarea文本字符串中插入【\r】or【\n】符号
      • var text='hello \n world'; document.getElementById("textareaId").value=text;

表单控件滚动条样式设置

本部分全文来自于文献2:CSS中关于滚动条样式设置的代码实例

  • ::-webkit-scrollbar 滚动条整体部分，可以设置宽度等
    • 滚动条整体部分
    • 属性：width,height,background,border等。
  • ::-webkit-scrollbar-button 滚动条两端的按钮
    • 滚动条两端的按钮。
    • 属性：display:none 让其不显示，也可以添加背景图片，颜色改变显示效果
  • ::-webkit-scrollbar-track 外层轨道
  • ::-webkit-scrollbar-track-piece 内层滚动槽
  • ::-webkit-scrollbar-thumb 滚动的滑块
  • ::-webkit-scrollbar-corner 边角
  • ::-webkit-resizer 定义右下角拖动块的样式
HTML之表单类控件、图像类元素的CSS特别样式汇总

图像

  • 背景图像填充
    • 不重复
      • background-repeat:no-repeat
    • 图片充满容器
      • background-size：100% 100%; 按容器比例撑满，图片变形
      • background-size：cover; 把背景图片放大到适合元素容器的尺寸，图片比例不变

参考文献

相关文章