|
|
|
|
|
|
贊助商
分類(lèi)目錄
贊助商
最新文章
搜索
純CSS實(shí)現(xiàn)輸入框字符自動(dòng)轉(zhuǎn)為小寫(xiě)或大寫(xiě)
作者:admin 時(shí)間:2021-5-25 15:9:31 瀏覽:對(duì)于輸入框的字符，如果要求只能輸入小寫(xiě)或大寫(xiě)，怎么處理？js實(shí)現(xiàn)？提交到后臺(tái)程序轉(zhuǎn)換？其實(shí)很簡(jiǎn)單，CSS就有這個(gè)功能，一條語(yǔ)句就搞定。
純CSS實(shí)現(xiàn)輸入框字符自動(dòng)轉(zhuǎn)為小寫(xiě)或大寫(xiě)
CSS
.lowercase{
text-transform: lowercase;
}
.uppercase{
text-transform: uppercase;
}
.capitalize{
text-transform: capitalize;
}
解釋?zhuān)?/strong>text-transform 屬性控制文本的大小寫(xiě)。這個(gè)屬性會(huì)改變?cè)刂械淖帜复笮?xiě)，而不論源文檔中文本的大小寫(xiě)。lowercase 定義字母為小寫(xiě)，uppercase 定義字母為大寫(xiě)，如果值為 capitalize，則要對(duì)首字母大寫(xiě)。
HTML
<input type="text" class="lowercase">
<input type="text" class="uppercase">
<input type="text" class="capitalize">
解釋?zhuān)?/strong>input標(biāo)簽使用class的值來(lái)控制文本大小寫(xiě)。
完整HTML代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>純CSS實(shí)現(xiàn)輸入框字符自動(dòng)轉(zhuǎn)為小寫(xiě)或大寫(xiě)</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<style type="text/css">
.lowercase{
text-transform: lowercase;
}
.uppercase{
text-transform: uppercase;
}
.capitalize{
text-transform: capitalize;
}
</style>
</head>
<body>
<div class="container">
<h1 class="page-header text-center">轉(zhuǎn)換輸入框字符</h1>
<div class="row">
<div class="col-sm-4 col-sm-offset-4">
<div class="form-group">
<label for="lowercase">小寫(xiě)</label>
<input type="text" id="lowercase" class="lowercase form-control">
</div>
<div class="form-group">
<label for="uppercase">大寫(xiě)</label>
<input type="text" id="uppercase" class="uppercase form-control">
</div>
<div class="form-group">
<label for="capitalize">首字母大寫(xiě)</label>
<input type="text" id="capitalize" class="capitalize form-control">
</div>
</div>
</div>
</div>
</body>
</html>
解釋?zhuān)篵ootstrap.css不是必須文件，它只是本案例用到的布局設(shè)計(jì)樣式文件。
標(biāo)簽: css css3 text-transform
- 純css3實(shí)現(xiàn)漂亮的單選按鈕radio
- CSS3+jQuery實(shí)現(xiàn)登錄表單與注冊(cè)表單同頁(yè)平滑切換
- 純CSS3實(shí)現(xiàn)簡(jiǎn)約又漂亮的用戶(hù)登錄框【演示/源碼下載】
- CSS3顏色漸變按鈕 鼠標(biāo)劃過(guò)變色
- 純CSS對(duì)話(huà)框/對(duì)話(huà)氣泡/語(yǔ)音泡沫/speech bubbles【27個(gè)示例】
- CSS-Ribbons 漸變色帶樣式實(shí)例【演示/源碼下載】
- css ribbons(3D帶狀)設(shè)計(jì)，適合標(biāo)題使用
- 純CSS3實(shí)現(xiàn)精美搜索框
- 收藏！44個(gè)CSS3制作的形狀圖形(shape)
- 130個(gè)純CSS3圖標(biāo)(CSS icons)【#下載#收藏】
- CSS3 loading預(yù)加載動(dòng)畫(huà)旋轉(zhuǎn)的圓弧【演示/源碼下載】
- CSS3+jQuery輕松實(shí)現(xiàn)工具提示(Tooltips)
- 純CSS3工具提示(Tooltips)【實(shí)例演示/源碼下載】
- 實(shí)用！純CSS3實(shí)現(xiàn)的內(nèi)容選項(xiàng)卡(Content Tabs)4個(gè)實(shí)例
- 純CSS3實(shí)現(xiàn)內(nèi)容折疊效果
- 站長(zhǎng)推薦
