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

2023-06-25,,

前言

记录下开发过程中一些特殊表单控件(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 定义右下角拖动块的样式

图像

背景图像填充

不重复

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

参考文献

实现textarea内换行
CSS中关于滚动条样式设置的代码实例
css让图片充满容器且不重复

HTML之表单类控件、图像类元素的CSS特别样式汇总的相关教程结束。

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

下载本文的Word格式文档,以方便收藏与打印。