如何將陰影添加到在輸入區域中鍵入的標籤？

最近我正在開發一個Q &一個網站，如stackoverflow.com。但是，當我嘗試實現陰影樣式，同時通過在HTML <輸入區>區域中輸入標籤來爲問題添加標籤時，我感到困惑。我想知道我應該使用哪些工具使我的<輸入區>區域中的每個標記都被陰影化，因爲在<輸入區區域中CSS樣式無用，以及如何操作？如何將陰影添加到在輸入區域中鍵入的標籤？

一個簡單的例子，下面列出這只是計算器的標籤輸入查詢區域：

Example

感謝您的幫助。

來源

2016-11-26 Xiangyi Meng

您當前的工作代碼請 –

@Xiangyi Meng別忘了打勾它=>如果回答是有用的 –

只是看看我在問題中添加的例子...而且你會知道我想要什麼.. 。謝謝T_T –

您可以使用box-shadow：inset來達到此目的。如果你想給陰影文本使用文字陰影

更多檢查此link。我在下面添加了一個示例。

input{ 
 
    box-shadow:inset 1px 1px 5px #000; 
 
    text-shadow:1px 1px 5px green; 
 
    width:300px; 
 
    height:200px; 
 
    font-size:20px; 
 
    font-weight:400; 
 
    }

<input type="text">

來源

2016-11-26 10:47:30

感謝您的回答，但我只是想讓我的標籤在輸入區域內陰影...不是輸入框本身...還有其他建議嗎？ –

@XiangyiMeng現在檢查，我正在更新 –

哇，這是接近我的目的地...... Thx你...但我可以讓我的標籤輸入區域像在stackoverflow？也許這對我來說有點難... :( –

<style> 
 
    #yourid{ 
 
    box-shadow:inset 0px 5px 5px #666666; 
 
    } 
 
</style> 
 
<input type="text" id="yourid">

來源

2016-11-26 10:50:34 kumarsher45

感謝您的回答......但我只是想讓我的標籤在輸入區域內陰影...不是輸入框本身...還有其他建議嗎？ –

請顯示你的代碼 – kumarsher45

使用text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4);

來源

2016-11-26 10:55:06 aje

你需要text-shadow吧：

input{ 
    color: white; 
    text-shadow: 2px 2px 4px #000000; 
}

也看看這裏的some generators來幫助你

來源

2016-11-26 10:55:22 candidJ

感謝所有的回答者。根據@vsync的提示。我使用Tagify來實現我的需求。該插件完全滿足我的要求。

來源

2016-11-26 11:13:39

如何將陰影添加到在輸入區域中鍵入的標籤？

回答

相關問題