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

最新推荐文章于 2023-01-29 14:44:24 发布

十年树木_2015

最新推荐文章于 2023-01-29 14:44:24 发布

阅读量2k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_30337695/article/details/50770496

版权

css 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

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;

效果图：