Category: CSS

Sometimes, we want to make Twitter Bootstrap menu dropdown on hover rather than click with CSS.

In this article, we’ll look at how to make Twitter Bootstrap menu dropdown on hover rather than click with CSS.

How to make Twitter Bootstrap menu dropdown on hover rather than click with CSS?

To make Twitter Bootstrap menu dropdown on hover rather than click with CSS, we make the drop down items block elements.

For instance, we write

ul.nav li.dropdown:hover ul.dropdown-menu {
  display: block;
}

to make the ul and li elements block elements to make the menu show on hover.

Conclusion

To make Twitter Bootstrap menu dropdown on hover rather than click with CSS, we make the drop down items block elements.

Sometimes, we want to remove the space between inline/inline-block elements with CSS.

In this article, we’ll look at how to remove the space between inline/inline-block elements with CSS.

How to remove the space between inline/inline-block elements with CSS?

To remove the space between inline/inline-block elements with CSS, we use flexbox.

For instance, we write

<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

to add some elements.

Then we write

p {
  display: flex;
}

to make the p element a flex container with display: flex;.

Now the spans won’t have gaps between them.

Conclusion

To remove the space between inline/inline-block elements with CSS, we use flexbox.

Sometimes, we want to overlay one div over another div with CSS.

In this article, we’ll look at how to overlay one div over another div with CSS.

How to overlay one div over another div with CSS?

To overlay one div over another div with CSS, we use relative or absolute positioning.

For instance, we write

<div id="container">
  <div id="navi">a</div>
  <div id="infoi">
    <img src="https://picsum.photos/30/30" height="20" width="32" />b
  </div>
</div>

to add divs with an image inside.

Then we write

#container {
  width: 100px;
  height: 100px;
  position: relative;
}

#navi,
#infoi {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#infoi {
  z-index: 10;
}

to make the divs with IDs navi and infoi overlay the container with position: absolute;.

We put the image above the rest of the elements with z-index: 10;.

Conclusion

To overlay one div over another div with CSS, we use relative or absolute positioning.

Sometimes, we want to select the first element with class with CSS.

In this article, we’ll look at how to select the first element with class with CSS.

How to select the first element with class with CSS?

To select the first element with class with CSS, we the first-of-type.

For instance, we write

.red:first-of-type {
  color: red;
}

to select the first element with class red with .red:first-of-type.

Conclusion

To select the first element with class with CSS, we the first-of-type.

Sometimes, we want to hide the HTML5 number input’s spin box with CSS.

In this article, we’ll look at how to hide the HTML5 number input’s spin box with CSS.

How to hide the HTML5 number input’s spin box with CSS?

To hide the HTML5 number input’s spin box with CSSm we set a few styles.

For instance, we write

<input type="number" step="0.01" />

to add a number input.

Then we hide the spin box with

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

to use -webkit-appearance: none; to hide the spin box.

We use -moz-appearance: textfield; to hide the spin box in Firefox.

Conclusion

To hide the HTML5 number input’s spin box with CSSm we set a few styles.