select 实现input 的placeholder效果

select 实现input 的placeholder效果

.placeholder {
	color: #AAAAAA;
}

#query-ehrno-ipt {
	width: 200px;
	height: 40px;
	border: 1px solid #CCCCCC;
	outline: none;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	font-size: 16px;
}

#query-userrole {
	width: 200px;
	height: 44px;
	font-size: 16px;
	border: 1px solid #CCCCCC;
	outline: none;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	font-size: 16px;
	cursor: pointer;
	color: #999;
}

option[disabled] {
	color: #999 !important;
}

option {
	color: #333 !important;
}

<!--用户管理-->
<div class="upload-file-mng">

	<div class="upload-item">
		<input type="text" placeholder="请输入ehr号查询" id="query-ehrno-ipt">
		
		<select name="" id="query-userrole">
			<option value="" selected>--请选择角色查询--</option>
		</select>	
		
	</div>
</div>

layui.use('form', function() {

	var form = layui.form;
	$.ajax({
		url : '${basePath}getAllRoles',
		dataType : 'json',
		type : 'get',
		success : function(data) {
			// console.log(data);
			//使用循环遍历，给下拉列表赋值
			$.each(data.roles, function(index, value) {
				// console.log(value);
			 $('#query-userrole').append(new Option(value.name, value.value)); // 下拉菜单里添加元素
			});
		//  layui.form.render("select");//重新渲染
		}
	})
  form.render();
});

$(function() {
	$('input,textarea').placeholder();

	$('#query-userrole').change(function() {
		if ($(this).val() != '') {
			$(this).css('color', '#333');
		} else {
			$(this).css('color', '#999');
		}
	})
});