在開發uni-app應用時，我們經常需要自定義輸入框（<input>）的樣式以匹配應用的整體設計。默認情況下，uni-app的輸入框提供了一些基本的樣式選項，但有時候我們需要更細致地控制輸入框的每個部分，例如placeholder文本的樣式。

1. 問題背景

Placeholder是輸入框中的一種提示文本，它在用戶未輸入任何內容時顯示。默認情況下，uni-app的placeholder文本樣式可能不符合我們的UI設計需求。例如，我們可能需要改變placeholder文本的字體大小和顏色。

2. 解決方案

uni-app允許我們通過placeholder-class屬性和CSS樣式來自定義placeholder的樣式。

3. 示例代碼

以下是一個示例，展示了如何自定義輸入框placeholder的字體大小和顏色：

<template><view class="search-box"><input type="text" v-model="keyword" placeholder="請輸入客戶名稱"placeholder-class="search_text" confirm-type="search"></view>
</template>

<style scoped>
.search-box {width: 100%; /* 使輸入框寬度為100% */padding: 10px; /* 添加內邊距 */box-sizing: border-box; /* 確保內邊距不影響寬度 */
}.search_text {font-size: 24rpx; /* 設置placeholder字體大小 */color: #B6B6C6; /* 設置placeholder顏色 */
}
</style>

4. 效果

上述代碼將創建一個輸入框，其placeholder文本的字體大小為24rpx，顏色為#B6B6C6。通過使用scoped樣式，我們確保這些樣式只應用于當前組件，不影響全局樣式。

5. 總結

通過使用placeholder-class屬性和CSS樣式，我們可以輕松自定義uni-app中輸入框的placeholder樣式。這種方法簡單而有效，可以幫助開發者實現更豐富的UI設計。

6. 注意事項

• 確保scoped樣式用于限制樣式的作用域，避免影響到其他組件。

• 根據需要調整font-size和color的值，以達到最佳的視覺效果。

通過這種方式，你可以靈活地控制uni-app中輸入框placeholder的樣式，使其更好地融入應用的整體設計中。