The Web Dev

Sometimes, we want to vertically align elements in a div with CSS.

In this article, we’ll look at how to vertically align elements in a div with CSS.

How to vertically align elements in a div with CSS?

To vertically align elements in a div with CSS, we use flexbox.

For instance, we weite

.container {
  display: flex;
  align-items: center;
}

to make the elements with class container flex containers with display: flex;.

And then we align the items inside vertically with align-items: center;.

Conclusion

To vertically align elements in a div with CSS, we use flexbox.

Sometimes, we want to style an input type="file" button with CSS.

In this article, we’ll look at how to style an input type="file" button with CSS.

How to style an input type="file" button with CSS?

To style an input type="file" button with CSS, we hide the file =input and add a label beside it.

For instance, we write

<label for="file-upload" class="custom-file-upload"> Custom Upload </label>
<input id="file-upload" type="file" />

to add a label and a file input.

Then we write

input[type="file"] {
  display: none;
}

.custom-file-upload {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
}

to hide the file input with display: none.

And we add styles for the label.

Conclusion

To style an input type="file" button with CSS, we hide the file =input and add a label beside it.

Sometimes, we want to remove the blue border from CSS custom-styled button in Chrome.

In this article, we’ll look at how to remove the blue border from CSS custom-styled button in Chrome.

How to remove the blue border from CSS custom-styled button in Chrome?

To remove the blue border from CSS custom-styled button in Chrome, we set the outline property.

For instance, we write

button:focus {
  outline: none;
  box-shadow: none;
}

to set the outline and box-shadow properties to none to remove the blue outline on the button when we focus on the button.

Conclusion

To remove the blue border from CSS custom-styled button in Chrome, we set the outline property.

Sometimes, we want to stretch and scale a CSS image in the background with CSS

In this article, we’ll look at how to stretch and scale a CSS image in the background with CSS.

How to stretch and scale a CSS image in the background with CSS?

To stretch and scale a CSS image in the background with CSS, we set the background-size property.

For instance, we write

div {
  background-size: cover;
}

to set background-size to cover to make the background image stretch and scale.

Conclusion

To stretch and scale a CSS image in the background with CSS, we set the background-size property.

Sometimes, we want to change the color of an svg element with CSS.

In this article, we’ll look at how to change the color of an svg element with CSS.

How to change the color of an svg element with CSS?

To change the color of an svg element with CSS, we set the filter property.

For instance, we write

<img src="dotted-arrow.svg" class="filter-green" />

to add an img element with the svg.

Thenw ewrite

.filter-green {
  filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg)
    brightness(118%) contrast(119%);
}

to tweak the colors for the filter-green class by apply filters to the image.

Conclusion

To change the color of an svg element with CSS, we set the filter property.