副題

Bootstrap3でCSSの追加無しにプレースホルダーリンク上のカーソルをpointerにする

結論

role="button"属性を追加する。

bootstrap3.3.7.css

[role="button"] {
  cursor: pointer;
}

概要

プレースホルダーリンクは、通常のリンクと異なり、マススオーバー時のカーソルがtextの「I」のようなものになってしまう。
デフォルトの指矢印「」のようなものにしたい。

なりゆき

SPA風ページ作りたい
ページ遷移はJSが担当する
テキストリンクを作りたい
ただしリンク移動はせず、JSでページ書き換える
なので、移動先は指定せず、プレースホルダーリンクにonClickを設定する
カーソルはリンクだとわかりやすいようにがいい
プレースホルダーリンクではカーソルがにならない
href="javascript:void(0)"はかっこ悪いからキライ
return false;もちょっと…そもそもダミーのリンクURLも設定するの面倒
CSSで設定したい
CSS書きたくない
Bootstrapから探す
あった

あくまでローカルなもののズボラ策として。

検証環境

Bootstrap3.3.7
Firefox 50

コード


<a href="test">普通のリンク</a> <br>
<a>プレースホルダリンク</a> <br>
<a href="javascript:void(0)">JavaScriptリンク</a> <br>
<a role="button">ロール付きプレースホルダリンク</a>

普通のリンク

 プレースホルダリンク

 JavaScriptリンク

 ロール付きプレースホルダリンク

QiitaもBootstrapな同じスタイルがあるはずですけどプレビューでは出力のrole属性が削除されている。

`role`属性って？

Web Accessibility Initiativeが策定したWAI-ARIAという、アクセシビリティを高めるための仕様の一部。
障害者のための補助属性などにもなるもよう。
まだまだ普及はしていないだろうが、表示上のスタイルのためだけに乱用することはよくないでしょう。

が、これが2014年3月20日勧告で、Bootstrap3自体は2013年からリリースしている。(初リリース時点ではroleは含まれていないが)
role属性の設定もbuttonしか書かれていないので、BootstrapはWAI-ARIAを意識したrole属性じゃないんじゃないかなーと思います。
ただそのまま、押せる(button)ことを表したいときに使うスタイル、程度かもしれません。

参考

クリックしても何も起こらないダミーのa要素 - Qiita
HTML5/テキスト/a要素プレースホルダを表す - TAG index
WAI-ARIA の基礎知識 — Website Usability Info
twbs/bootstrap at v3.3.7
HTML で aタグを使ってるのに、矢印カーソルが出てこなくてなんでやねんと思った時 - Qiita - コメント