Cách đặt màu và kiểu phông chữ của văn bản giữ chỗ

Tôi muốn đặt màu cho trình giữ chỗ, thay đổi kiểu phông chữ thành đậm và tăng kích cỡ.Cách đặt màu và kiểu phông chữ của văn bản giữ chỗ

Tôi làm cách nào để đạt được điều này? Tôi có nên đưa phong cách cho trình giữ chỗ hoặc có cách nào khác để tôi có thể đạt được điều này không? Tôi muốn thiết lập màu sắc và thay đổi kiểu phông chữ để làm việc trong tất cả các trình duyệt cho kích thước lựa chọn trong kết quả dưới đây.

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

Nguồn

2016-07-20 overflowstack9

có thể trùng lặp của [Thay đổi màu placeholder HTML5 của một đầu vào với CSS] (http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css) – LcSalazar

Bạn có thể sử dụng đoạn mã sau hỗ trợ cross-browser:

Đối Google Chrome:

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

Đối Mozilla Firefox:

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

Đối Internet Explorer:

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

Đối Opera:

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

Nguồn

2016-07-20 17:50:17

Làm thế nào để thêm đậm? @Angel Politis – overflowstack9

@ overflowstack9 đặt ** 'font-weight: bold' **. Tôi sẽ chỉnh sửa để cho bạn thấy. –

nó đã làm việc @Angel politis – overflowstack9

Bạn có thể sử dụng placeholder giả yếu tố Và font-weight để làm cho nó mạnh bạo hơn

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

Nguồn

2016-07-20 17:51:05

Tôi đã cập nhật câu trả lời của tôi;) –

Nó làm việc @devid Farinelli – overflowstack9

bạn có thể tìm thấy điều này và nhiều hơn nữa css thủ thuật ở đây

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>

Nguồn

2016-07-20 17:53:20

làm thế nào để làm cho nơi giữ đậm .. ..? – overflowstack9

Tôi đã thêm chữ đậm vào mã –

Vâng nó đã hoạt động @Ram Segev công việc của bạn đáng giá – overflowstack9

Dưới đây là để tùy biến giữ chỗ

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

Nguồn

2016-07-20 17:59:18 hdev

Cách đặt màu và kiểu phông chữ của văn bản giữ chỗ

Trả lời

Các vấn đề liên quan