在前端开发中，确实存在一些不常用但非常实用的CSS代码片段，这些代码可以帮助你实现一些独特的效果，提升用户体验。以下是一些推荐的CSS代码和技巧：清除文本框、按钮等的默认选中样式：outline: none;这段代码 ...
|
在前端开发中，确实存在一些不常用但非常实用的CSS代码片段，这些代码可以帮助你实现一些独特的效果，提升用户体验。以下是一些推荐的CSS代码和技巧： 清除文本框、按钮等的默认选中样式： outline: none; 这段代码可以清除文本框、按钮等元素在选中时周围的蓝色框。 设置文本两端对齐： text-align-last: justify; 使用这段代码可以设置文本在最后一行也进行两端对齐。 设置标签为可编辑状态： contenteditable="true"; 通过添加这个属性，你可以使任何HTML标签变为可编辑状态。 禁止用户选中文本： user-select: none; 这段代码可以禁止用户选中文本，常用于防止用户复制内容。 悼念模式（灰度显示）： filter: grayscale(100%); 使用这段代码可以将网页整体风格变为灰色，常用于国家法定的公祭日或特殊情况的纪念。 改变文本选中颜色： ::selection { background: #f00; /* 红色背景 */} 这段代码可以改变用户选中文本时的背景颜色。 文本不换行，超出用省略号显示： overflow: hidden;white-space: nowrap;text-overflow: ellipsis; 这三段代码组合使用可以实现文本不换行，并在超出容器宽度时用省略号显示。 文本多行超出省略号显示： display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3; /* 行数，超出三行隐藏且多余的用省略号表示 */overflow: hidden;text-overflow: ellipsis; 这段代码适用于现代浏览器，可以实现文本多行超出时显示省略号。 去掉type="number"右边输入框的三角符号： input::-webkit-outer-spin-button,input::-webkit-inner-spin-button { -webkit-appearance: none;}input[type="number"] { -moz-appearance: textfield;} 这段代码可以去除type="number"输入框右侧的上下箭头。 自定义placeholder样式： ::placeholder { color: red; /* 自定义placeholder文字颜色 */} 使用这段代码可以自定义输入框placeholder的文字颜色。 这些CSS代码和技巧虽然不常用，但在特定场景下非常实用，可以帮助你实现一些独特的效果，提升用户体验。希望这些代码对你有所帮助！ |
注册
运营推广
2025-1-13 14:03
8浏览
皖ICP备2021010202号
赣公网安备36112102000145号