Changing Cursor with CSS - Types of Mouse Cursors and CSS Settings

Table of Contents - いろいろ Tips - 目次: Sitemap Generator - サイトマップ生成プログラム

In-Page Search - 検索を自ページ設置

Download Counter - ダウンロードカウンター

Draft Manager - ブラウザで下書き保存

Text Encryption - テキスト暗号・復号化

CSS & JavaScript - 圧縮・整形/復元ツール

Simple Yet Powerful Note Tool - メモメモ

Task Management - 仕事/やること管理

Local Storage Check - ローカルストレージチェック

Pixel Art - ピクセルアート作成

Freehand Drawing - フリーハンドドローイング

Pomodoro Timer - ポモドーロタイマー

Text Counter - 文字数カウント

Notepad - メモ帳

原稿用紙エディター

俳句・短歌下書きツール

ウィンドウサイズ

インターネット環境

タブを再び開く

Webページ最新状態

ページ内文字検索

スマホページ内検索

画像を加工する

Macでカラーコードを調べ

Mac用解凍ソフト

ショートカット

コピペの方法

右クリック禁止を回避

ローマ字かな入力変換表

ひらがな→ヘボン式ローマ字変換

ウェブページで長音ローマ字

ファイル差分チェック

音声合成

テキスト読み上げ

テキスト読み上げ書き方

全国公衆電話の場所

よく使う記号

キーボードの記号

キーボードの記号と入力方法

操作で使うキーの名称

CSSでカーソルを変える

Changing Cursor with CSS
= Types of Mouse Cursors and CSS Settings =

On a webpage, the shape of the mouse cursor or mouse pointer can be set using the CSS property "cursor".
This guide explores CSS values for different cursor shapes and how to configure them.
You can click on the properties to copy them. This page includes the property "cursor:copy" for copyable elements.
Sample images are provided for each property. However, the shape may differ depending on your operating system version and browser.
Hovering over the "On Mouse" sections allows you to see the cursor as it appears in your environment.

《How to Set》

If you want to apply it to multiple sections on a page, it's common practice to write the following in the <head> section or an external CSS file.
".cursorstyle" is a custom class name.

<style>
.cursorstyle {
cursor : pointer;
}
</style> Copy
Example of applying the above CSS using the "class" attribute.
<span class="cursorstyle">Text</span> Copy

<div class="cursorstyle">Text</div> Copy

<a class="cursorstyle">Text</a> Copy
Example when applying to a single section or a few elements.
Use the "style" attribute and write the property directly.
<span style="cursor : pointer;">Text</span> Copy

<div style="cursor : pointer;">Text</div> Copy

《Cursor Types and CSS Values》

CSS Values [Click to Copy]	Sample in OS [May vary depending on the browser]		Mouse-Over Shape Preview	Description
CSS Values [Click to Copy]	Windows	Mac	Mouse-Over Shape Preview	Description
auto cursor: auto;			《Mouse-Over》	The browser automatically determines the cursor based on the context
default cursor: default;			《Mouse-Over》	Displays a standard arrow
none cursor: none			《Mouse-Over》	Does not display a cursor
context-menu cursor: context-menu			《Mouse-Over》	Allows the use of a context menu
help cursor: help			《Mouse-Over》	Help item
pointer cursor: pointer			《Mouse-Over》	When hovering over a link, etc.
progress cursor: progress			《Mouse-Over》	Processing a task. User interaction is possible
wait cursor: wait			《Mouse-Over》	Processing a task. User interaction is not possible
cell cursor: cell			《Mouse-Over》	Selectable table cell
crosshair cursor: crosshair			《Mouse-Over》	Cross cursor, often indicating selection on a bitmap
text cursor: text			《Mouse-Over》	Selectable text
vertical-text cursor: vertical-text			《Mouse-Over》	Selectable vertical text
alias cursor: alias			《Mouse-Over》	Can create an alias or shortcut
copy cursor: copy			《Mouse-Over》	Copyable
move cursor: move			《Mouse-Over》	Movable
no-drop cursor: no-drop			《Mouse-Over》	Cannot be dropped at that position
not-allowed cursor: not-allowed			《Mouse-Over》	The requested action cannot be performed
grab cursor: grab			《Mouse-Over》	Draggable, usually paired with grabbing
grabbing cursor: grabbing			《Mouse-Over》	During dragging, paired with grab
all-scroll cursor: all-scroll			《Mouse-Over》	Can scroll in any direction
col-resize cursor: col-resize			《Mouse-Over》	Resizable box with horizontal edge movement
row-resize cursor: row-resize			《Mouse-Over》	Resizable box with vertical edge movement
n-resize cursor: n-resize			《Mouse-Over》	Resizable box with edge movement towards the north (top)
w-resize cursor: w-resize			《Mouse-Over》	Resizable box with edge movement towards the west (left)
s-resize cursor: s-resize			《Mouse-Over》	Resizable box with edge movement towards the south (bottom)
e-resize cursor: e-resize			《Mouse-Over》	Resizable box with edge movement towards the east (right)
nw-resize cursor: nw-resize			《Mouse-Over》	Resizable box with edge movement towards the northwest (top-left)
ne-resize cursor: ne-resize			《Mouse-Over》	Resizable box with edge movement towards the northeast (top-right)
sw-resize cursor: sw-resize			《Mouse-Over》	Resizable box with edge movement towards the southwest (bottom-left)
se-resize cursor: se-resize			《Mouse-Over》	Resizable box with edge movement towards the southeast (bottom-right)
ew-resize cursor: ew-resize			《Mouse-Over》	Resizable box with bidirectional horizontal edge movement
ns-resize cursor: ns-resize			《Mouse-Over》	Resizable box with bidirectional vertical edge movement
nesw-resize cursor: nesw-resize			《Mouse-Over》	Resizable box with edge movement in northeast-southwest (top-right & bottom-left) directions
nwse-resize cursor: nwse-resize			《Mouse-Over》	Resizable box with edge movement in northwest-southeast (top-left & bottom-right) directions
zoom-in cursor: zoom-in			《Mouse-Over》	Can zoom in
zoom-out cursor: zoom-out			《Mouse-Over》	Can zoom out
URL	Any image can be set as a cursor. The image size is limited to 128 × 128px. The sample image size is 70 × 70px. 《Mouse-Over》 .cursorimg {cursor: url(image-path), auto;} Copy ".cursorimg" can be any name. <div {cursor: url(image-path), auto;}>Text</div> Copy 《Retina Display Support》 .cursorimg {cursor: -webkit-image-set(url(@1x-image) 1x, url(@2x-image) 2x), auto;} Copy

Changing Cursor with CSS= Types of Mouse Cursors and CSS Settings =

Changing Cursor with CSS
= Types of Mouse Cursors and CSS Settings =

おすすめサイト・関連サイト…