Jak ustawić kolor i styl czcionki tekstu zastępczego?

Chcę ustawić kolor na symbol zastępczy, zmienić styl czcionki na pogrubiony i zwiększyć rozmiar.Jak ustawić kolor i styl czcionki tekstu zastępczego?

Jak mogę to osiągnąć? Czy powinienem nadać styl symbolowi zastępczego, czy jest jakiś inny sposób, w jaki mogę to osiągnąć? Chcę ustawić kolor i zmienić styl czcionki, aby działał we wszystkich przeglądarkach, aby wybrać rozmiar w poniższym wyniku.

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

Źródło

2016-07-20 overflowstack9

Możliwy duplikat [Zmiana wejścia w HTML5 zastępczy kolor z CSS] (http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css) – LcSalazar

Można użyć następującego kodu wsparcia cross-browser:

Dla Google Chrome:

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

Dla Mozilla Firefox:

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

Dla Internet Explorer:

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

Dla Opera:

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

Źródło

2016-07-20 17:50:17

Jak dodać pogrubienie? @Angel Politis – overflowstack9

@ overflowstack9 put ** 'font-weight: bold' **. Będę edytować, aby Ci pokazać. –

to działało @Angel politis – overflowstack9

można użyć placeholder pseudo elementem I font-weight aby odważniejsze

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

Źródło

2016-07-20 17:51:05

Zaktualizowałem moją odpowiedź;) –

Udało się @devid Farinelli – overflowstack9

można znaleźć to i więcej sztuczek tutaj 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>

Źródło

2016-07-20 17:53:20

jak zrobić miejsce pogrubienie .. ..? – overflowstack9

Dodałem pogrubioną czcionkę do kodu –

Tak, to zadziałało @Ram Segev Twoja praca jest dostrzegalna – overflowstack9

Oto dostosowywania zastępczy

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

Źródło

2016-07-20 17:59:18 hdev

Jak ustawić kolor i styl czcionki tekstu zastępczego?

Odpowiedz

Powiązane problemy