Как установить цвет и стиль шрифта текста заполнителя

Я хочу установить цвет для заполнителя, изменить стиль шрифта на полужирный и увеличить размер.Как установить цвет и стиль шрифта текста заполнителя

Как я могу это достичь? Должен ли я давать стиль заполнителю, или есть ли другой способ, я могу это достичь? Я хочу установить цвет и изменить стиль шрифта для работы во всех браузерах для выбора размера в приведенном ниже результате.

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

источник

2016-07-20 overflowstack9

Возможный дубликат [Изменение входного в HTML5 заполнитель цвета с CSS] (http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css) – LcSalazar

Вы можете использовать следующий код для кросс-браузерная:

Для Google Chrome:

.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; 
}

источник

2016-07-20 17:50:17

Как добавить жирный шрифт? @Angel Politis – overflowstack9

@ overflowstack9 класть ** 'font-weight: bold' **. Я отредактирую, чтобы показать вам. –

это сработало @Angel politis – overflowstack9

Вы можете использовать placeholder псевдо элемент И 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>

источник

2016-07-20 17:51:05

Я обновил свой ответ;) –

Это сработало @devid Farinelli – overflowstack9

вы можете найти это и больше 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>

источник

2016-07-20 17:53:20

как сделать место держателя жирным шрифтом .. ..? – overflowstack9

Я добавил полужирный код –

Да, он работал @Ram Segev твоя работа заметна – overflowstack9

Вот для настройки заполнитель

::-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; 
}

источник

2016-07-20 17:59:18 hdev

Как установить цвет и стиль шрифта текста заполнителя

ответ

Смежные вопросы