CSS修改前端的一些样式等，持续更新...

来源：互联网发布：adobe flash play mac 编辑：程序博客网时间：2024/05/16 04:41

1、select默认的下拉框，当改变select大小等时，默认的下拉箭头很小，难看，怎么修改？

html代码“

 <select class="selectbox_province" name="textfield_province" value="" size="1">       <option value="0"></option>         <option value="1">北京</option>       <option value="2">上海</option>        <option value="3">天津</option></select>

更改select默认下拉框的样式，css代码：

.selectbox_province {// 将默认的select样式清除appearance:none;-moz-appearance:none;-webkit-appearance:none;/*在选择框的最右侧中间显示小箭头图片*/  background: url("/sfytj/dist/images/icon/select_arrow.png") no-repeat scroll center transparent;  background-size: 3% 31%;  background-position: 99%;width:650px;border:2px solid #999999;height: 62px;        padding-left:25px;        padding-right:30px;}/*清除ie的默认选择框样式清除，隐藏下拉箭头*/select::-ms-expand { display: none; }

注意最后的select::-ms-expand将ie下默认的下拉箭头隐藏掉。

网上找了一些其他的模拟select等，使用ul li来模拟等，然后修改样式，还没使用，感觉麻烦，下次有更好的方法，再更新上。。。。

----这个是修改后的样式。

---这个是使用的倒三角下拉箭头。

2、使用css方法来将over-flow：hidden不展示的部分使用省略号代替：

css使用...来截去字符串：position: absolute;top: 0px;left: 135px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width: 112px;text-overflow 属性规定当文本溢出包含元素时发生的事情。 默认值clip；clip  ----    修剪文本。ellipsis --------显示省略符号来代表被修剪的文本。string -------- 使用给定的字符串来代表被修剪的文本。white-space 属性设置如何处理元素内的空白。normal-----默认。空白会被浏览器忽略。pre ---------空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。nowrap-------文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。inherit：这个样式表示从父元素继承顶部内边距的值，inherit就是继承父元素的意思。例如一个div的padding-top:10px; 如果它里面还包含了一个p，这个p的padding-top:inherit; 那就相当于这个p的padding-top:10px;

效果图：

0 0