Festlegen der Farbe und des Schriftstils für den Platzhaltertext

Ich möchte die Farbe für den Platzhalter festlegen, den Schriftstil in Fettdruck ändern und die Größe erhöhen.Festlegen der Farbe und des Schriftstils für den Platzhaltertext

Wie kann ich das erreichen? Soll ich dem Platzhalter Stil geben, oder kann ich das anders machen? Ich möchte die Farbe einstellen und den Schriftstil so ändern, dass er in allen Browsern für ausgewählte Größe im folgenden Ergebnis funktioniert.

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

Quelle

2016-07-20 overflowstack9

Mögliche Duplikat [Ändern eines HTML5 Platzhalter Farbe Eingang mit CSS] (http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css) – LcSalazar

können Sie den folgenden Code für Cross-Browser-Unterstützung:

Für Google Chrome:

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

Für Mozilla Firefox:

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

Für Internet Explorer:

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

Für Opera:

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

Quelle

2016-07-20 17:50:17

Wie fett hinzufügen? @Angel Politis – overflowstack9

@ overflowstack9 setzen ** 'font-weight: fett '**. Ich werde es bearbeiten, um es dir zu zeigen. –

es funktionierte @ Angel politis – overflowstack9

Sie das placeholder Pseudoelement Und font-weight verwenden können, um es kühner zu machen

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

Quelle

2016-07-20 17:51:05

Ich habe meine Antwort aktualisiert;) –

Es funktionierte @devid Farinelli – overflowstack9

können Sie dies und mehr CSS-Tricks finden hier

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>

Quelle

2016-07-20 17:53:20

wie Platzhalter fett machen .. ..? – overflowstack9

Ich habe den Code –

fett hinzugefügt Yeah es funktioniert @Ram Segev Ihre Arbeit spürbar – overflowstack9

Hier ist die für die Anpassung Platzhalter

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

Quelle

2016-07-20 17:59:18 hdev

Festlegen der Farbe und des Schriftstils für den Platzhaltertext

Antwort

Verwandte Themen