Disable a tag in HTML

Question

My question is quite simple. I made an .inactive class with no pointer-events.

I actually want to show that Prohibid symbol from glyphicon or whatever in red.

How can I achive this?

.inactive {
  color: #ccc;
  pointer-events: none;
  cursor: default;
}

.nav-tabs > li {
  background: #000;
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#" class="inactive">INACTIVE</a></li>
</ul>

You should check this topic: https://stackoverflow.com/questions/25654413/add-css-cursor-property-when-using-pointer-events-none — Mihail Minkov, Apr 15 '19 at 12:38

score 1 · Answer 1 · answered Apr 15 '19 at 11:48

1

You could add as the content of the after pseudoelement the U+233D symbol ( ⌽) rotated by 90 degrees

.inactive::after {
  content: "\233D";
  display: inline-block;
  color: #D02124;
  margin-left: .5em;
  font-size: 1.5rem;
  transform: rotateZ(90deg);
}

answered Apr 15 '19 at 11:48

Fabrizio Calderan

120,726
26
164
177

what does the :after mean? – user11341081 Apr 15 '19 at 11:52
Take a look at https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements#Pseudo-elements – Fabrizio Calderan Apr 15 '19 at 11:54
Try also `content: "\2298"` to print this character: ⊘ – DanieleAlessandra Apr 15 '19 at 12:33

Kamil Kiełczewski · Answer 2 · 2019-04-16T03:54:22.367

To change cursor on inacticve tab use red svg with icon on li element by adding this to css

li {
  cursor: url("data:image/svg+xml;utf8,   %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='31' height='32' viewBox='0 0 31 32'%3E%3Ctitle%3Eblock%3C/title%3E%3Cpath style='fill: red' d='M15.36 0.64q6.4 0 10.88 4.48t4.48 10.88q0 6.336-4.48 10.848t-10.88 4.512q-6.336 0-10.848-4.512t-4.512-10.848q0-6.4 4.512-10.88t10.848-4.48zM3.712 16q0 4.224 2.624 7.36l16.448-16.448q-3.2-2.624-7.424-2.624-4.864 0-8.256 3.424t-3.392 8.288zM15.36 27.648q4.864 0 8.288-3.424t3.424-8.224q0-4.16-2.624-7.424l-16.448 16.448q3.136 2.624 7.36 2.624z'%3E%3C/path%3E%3C/svg%3E "), auto;
}

li {
  cursor: url("data:image/svg+xml;utf8,   %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='31' height='32' viewBox='0 0 31 32'%3E%3Ctitle%3Eblock%3C/title%3E%3Cpath style='fill: red' d='M15.36 0.64q6.4 0 10.88 4.48t4.48 10.88q0 6.336-4.48 10.848t-10.88 4.512q-6.336 0-10.848-4.512t-4.512-10.848q0-6.4 4.512-10.88t10.848-4.48zM3.712 16q0 4.224 2.624 7.36l16.448-16.448q-3.2-2.624-7.424-2.624-4.864 0-8.256 3.424t-3.392 8.288zM15.36 27.648q4.864 0 8.288-3.424t3.424-8.224q0-4.16-2.624-7.424l-16.448 16.448q3.136 2.624 7.36 2.624z'%3E%3C/path%3E%3C/svg%3E "), auto;
}

.inactive {
  color: #ccc;
  pointer-events: none;
  cursor: default;
}

.nav-tabs > li {
  background: #000;
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation" ><a href="#" class="inactive">INACTIVE</a></li>
</ul>

To generate svg from font go to http://fontello.com/ choose one icon and click on red upper button "Download webfont". Then unzip file and go to https://icomoon.io/app and click "Import icons" (button) and upload .svg file from that zip and select your icon and click (on page bottom) on "Generate svg and more". Then copy body of that svg file change/add proper size/ style (fill: red) inside it - and paste it to following script to get valid css url code:

let str = document.querySelector('.svgData').innerHTML;

let r = str
  .replace('width="256" height="256" ', "")
  .replace(/> +/g, ">")
  .replace(/ +</g, "<")
  .replace(/>/g, "%3E")
  .replace(/</g, "%3C")
  .replace(/>/g, "%3E")
  .replace(/#/g, "%23")
  .replace(/"/g, "'")
  .replace(/ +/g, " ")
  .replace(/^ +/g, "")
  .split("\n")
  .join("");


msg.innerHTML = `<pre>cursor: url("data:image/svg+xml;utf8,${r}");</pre><br>length: ${r.length} char`

<div style="display:flex">

  <!-- PASTE you svg file inside div below -->

  <div class="svgData">

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="31" height="32" viewBox="0 0 31 32">
<title>block</title>
<path style="fill: red" d="M15.36 0.64q6.4 0 10.88 4.48t4.48 10.88q0 6.336-4.48 10.848t-10.88 4.512q-6.336 0-10.848-4.512t-4.512-10.848q0-6.4 4.512-10.88t10.848-4.48zM3.712 16q0 4.224 2.624 7.36l16.448-16.448q-3.2-2.624-7.424-2.624-4.864 0-8.256 3.424t-3.392 8.288zM15.36 27.648q4.864 0 8.288-3.424t3.424-8.224q0-4.16-2.624-7.424l-16.448 16.448q3.136 2.624 7.36 2.624z"></path>
</svg>

  </div>
</div>

<div id="msg"></div>

You've removed `pointer-events: none;` which the question specifically mentioned — Quentin, Apr 15 '19 at 12:25

Disable a tag in HTML

2 Answers2