Html 如何设置占位符文本的颜色和字体样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38487394/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set the color and font style of placeholder text
提问by overflowstack9
I want to set the color to the placeholder, change the font style to bold, and increase the size.
我想将颜色设置为占位符，将字体样式更改为粗体，并增加大小。
How can I achieve this? Should I give style to the placeholder, or is there any other way can I achieve this? I want to set the color and change font style to work in all browsers for select size in the below result.
我怎样才能做到这一点？我应该为占位符提供样式，还是有其他方法可以实现这一点？我想设置颜色并更改字体样式以在所有浏览器中工作以在以下结果中选择大小。
<!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>回答by Angel Politis
You can use the following code for cross-browser support:
您可以使用以下代码进行跨浏览器支持：
For Google Chrome:
对于谷歌浏览器：
.element::-webkit-input-placeholder {
color: blue;
font-weight: bold;
}
For Mozilla Firefox:
对于Mozilla Firefox：
.element::-moz-placeholder {
color: blue;
font-weight: bold;
}
For Internet Explorer:
对于Internet Explorer：
.element:-ms-input-placeholder {
color: blue;
font-weight: bold;
}
For Opera:
对于歌剧：
.element:-o-input-placeholder {
color: blue;
font-weight: bold;
}
回答by Ram Segev
you can find this and more css tricks here
你可以在这里找到这个和更多的 css 技巧
https://css-tricks.com/snippets/css/style-placeholder-text/
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>回答by Devid Farinelli
You can use the placeholderpseudo element
And font-weightto make it bolder
您可以使用占位符伪元素并font-weight使其更粗
<!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 {
font-weight: 800;
font-size: 16px;
}
:-moz-placeholder {
font-weight: 800;
font-size: 16px;
}
::-moz-placeholder {
font-weight: 800;
font-size: 16px;
}
:-ms-input-placeholder {
font-weight: 800;
font-size: 16px;
}
}
</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>回答by hdev
Here is the for customizing placeholder
这是用于自定义占位符的
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #909;
font-size:12px;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #909;
font-size:12px;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #909;
font-size:12px;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #909;
font-size:12px;
}
回答by R. Gurung
For me, just the font-weight: normal;worked like
对我来说，就像font-weight: normal;工作一样
.class {
font-weight: normal;
}
