ove*_*ck9 10 html css html5 placeholder css3
我想将颜色设置为占位符,将字体样式更改为粗体,并增加大小.
我怎样才能做到这一点？我应该给占位符提供样式,还是有其他方法可以实现这个目的吗？我想在下面的结果中设置颜色并更改字体样式以适用于所有浏览器中的选择大小.
<!doctype html>
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }
.k-dropdown-wrap{
border-width: 5px !important;
border-color: #D8D3D3 !important;
}
}
</style>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.default.mobile.min.css" />
<script src="//kendo.cdn.telerik.com/2016.2.607/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>
<div id="example" role="application">
<div id="tshirt-view" class="demo-section k-content">
<select id="size" placeholder="Select City..." style="width: 300px;" >
<option />
<option />Newyork
<option />Hyderabad
<option />Bangalore
<option />Kolkata
<option />Delhi
</select>
</div>
<script>
$(document).ready(function() {
// create ComboBox from input HTML element
// create ComboBox from select HTML element
$("#size").kendoComboBox();
var select = $("#size").data("kendoComboBox");
});
</script>
</div></!doctype>Ang*_*tis 16
您可以使用以下代码进行跨浏览器支持:
对于谷歌浏览器:
.element::-webkit-input-placeholder {
color: blue;
font-weight: bold;
}
对于Mozilla Firefox:
.element::-moz-placeholder {
color: blue;
font-weight: bold;
}
对于Internet Explorer:
.element:-ms-input-placeholder {
color: blue;
font-weight: bold;
}
对于Opera:
.element:-o-input-placeholder {
color: blue;
font-weight: bold;
}
你可以在这里找到这个和更多的CSS技巧
https://css-tricks.com/snippets/css/style-placeholder-text/
::-webkit-input-placeholder {
color: red;
font-weight: 800;
}
:-moz-placeholder { /* Firefox 18- */
color: red;
font-weight: 800;
}
::-moz-placeholder { /* Firefox 19+ */
color: red;
font-weight: 800;
}
:-ms-input-placeholder {
color: red;
font-weight: 800;
}<!doctype html>
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }
.k-dropdown-wrap{
border-width: 5px !important;
border-color: #D8D3D3 !important;
}
::-webkit-input-placeholder {
color: red;
}
}
</style>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.default.mobile.min.css" />
<script src="//kendo.cdn.telerik.com/2016.2.607/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>
<div id="example" role="application">
<div id="tshirt-view" class="demo-section k-content">
<h4 style="margin-bottom: .5em;">Select City</h4>
<select id="size" placeholder="Select City..." style="width: 300px;" >
<option />
<option />Newyork
<option />Hyderabad
<option />Bangalore
<option />Kolkata
<option />Delhi
</select>
</div>
<script>
$(document).ready(function() {
// create ComboBox from input HTML element
// create ComboBox from select HTML element
$("#size").kendoComboBox();
var select = $("#size").data("kendoComboBox");
});
</script>
</div></!doctype>