來源:
鼠標(biāo)樣式cursor
li {cursor: pointer;}
設(shè)置或檢索在對象上移動的鼠標(biāo)指針采用何種系統(tǒng)預(yù)定義的光標(biāo)形狀
屬性值 | 描述 |
---|---|
default | 小白 默認(rèn) |
pointer | 小手 |
move | 移動 |
text | 文本 |
not-allowed | 禁止 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用戶界面樣式-鼠標(biāo)樣式cursor</title>
</head>
<body>
<ul>
<li style="cursor:default;">默認(rèn),通常一個(gè)箭頭</li>
<li style="cursor:pointer;">小手</li>
<li style="cursor:move;">移動</li>
<li style="cursor:text;">文本</li>
<li style="cursor:not-allowed;">禁止</li>
<li style="cursor:crosshair;">十字線</li>
<li style="cursor:e-resize;">矩形框的邊緣可被向右移動</li>
<li style="cursor:ne-resize;">矩形框的邊緣可被向上以及向右移動</li>
<li style="cursor:nw-resize;">矩形框的邊緣可被向上以及向左移動</li>
<li style="cursor:n-resize;">矩形框的邊緣可被向上移動</li>
<li style="cursor:se-resize;">矩形框的邊緣可被向下及向右移動</li>
<li style="cursor:sw-resize;">矩形框的邊緣可被向下及向左移動</li>
<li style="cursor:s-resize;">矩形框的邊緣可被向下移動</li>
<li style="cursor:wait;">程序正忙</li>
<li style="cursor:help;">可用的幫助</li>
</ul>
</body>
</html>
輪廓線outline
給表單添加outline:0;或者outline:none;樣式后渊胸,就可以去掉默認(rèn)的邊框。
input { outline: none; }
textarea標(biāo)簽寫在一行
如果<textarea>之間有空格換行</textarea>衅胀,頁面中的文本域光標(biāo)放上去,會有空格內(nèi)容顯示菜皂。
<textarea name="" id="" cols="30" rows="10">
</textarea>
image.png
防止拖拽文本域resize
實(shí)際開發(fā)中协饲,我們文本域右下角是不可以拖拽的。
textarea { resize: none; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用戶界面樣式-表單輪廓和防止拖拽文本域</title>
<style>
input, textarea {
outline: none;
}
textarea {
resize: none;
}
</style>
</head>
<body>
<input type="text">
<textarea name="" id="" cols="30" rows="10"></textarea>
</body>
</html>