问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何设置占位符文本的颜色和字体样式

社区维基
1
新手上路，请多包涵

我想将颜色设置为占位符，将字体样式更改为粗体，并增加大小。

我怎样才能做到这一点？我应该为占位符赋予样式，还是有其他方法可以实现这一点？我想设置颜色并更改字体样式以在所有浏览器中工作以在以下结果中选择大小。

 <!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>

原文由 overflowstack9 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlcssplaceholder
阅读 423
2 个回答
得票最新
社区维基
1
✓ 已被采纳

您可以使用以下代码 来实现跨浏览器支持：

对于 谷歌浏览器：

 .element::-webkit-input-placeholder {
    color: blue;
    font-weight: bold;
}

对于 火狐浏览器：

 .element::-moz-placeholder {
    color: blue;
    font-weight: bold;
}

对于 Internet Explorer ：

 .element:-ms-input-placeholder {
    color: blue;
    font-weight: bold;
}

对于 歌剧：

 .element:-o-input-placeholder {
    color: blue;
    font-weight: bold;
}

原文由 Angel Politis 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

你可以在这里找到这个和更多的 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>

原文由 Ram Segev 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题