滑鼠樣式/表單輪廓線

yi把菜刀發表於2020-12-20

CSS苦逼學習日記（7）

滑鼠樣式：cursor

li { cursor: pointer; }

設定火箭所在物件上移動的滑鼠指標才用何種系統預定義的游標形狀。

有5種屬性值： default ，pointer ， move ，text ， not-allowed

1.default：小白 預設；
2.pointer ： 小手；
3.move：移動；
4.text：文字；
5.not-allowed：禁止

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li style="cursor: default; ;">我是滑鼠預設樣式</li>
        <li style="cursor: pointer;">我是滑鼠小手模式</li>
        <li style="cursor: move;">我是滑鼠移動樣式</li>
        <li style="cursor: text;">我是滑鼠文字樣式</li>
        <li style="cursor: not-allowed;">我是滑鼠禁止樣式</li>
    </ul>
</body>
</html>

以上是各種樣式的程式碼，複製執行之後體驗各種效果。

表單輪廓線

預設的表單屬性中的 input 和textarea等屬性是帶有邊框的，其中textarea更是可以用滑鼠左擊向外拉伸，但是可以通過css禁止這種行為的出現：

  textarea {
            resize: none;
            outline: none;
        }

其中：
resize 是禁止向外延伸文字框，之後滑鼠不能改變文字框的大小；
outline：none，當滑鼠點選此文字框時，表單的外邊線不會發生變粗等變化，而是正常顯示

相關文章