Category: CSS

To disable native date picker in Google Chrome with CSS, we can hide elements with selector input::-webkit-calendar-picker-indicator.

for instance, we write

input::-webkit-calendar-picker-indicator {
  display: none;
}

to hide the native date inputs with display: none;.

And we hide the prompts with

input[type="date"]::-webkit-input-placeholder {
  visibility: hidden !important;
}

To vertically align floating divs with CSS, we use flexbox.

For instance, we write

<div id="wrapper">
  <div id="left-div">
    <ul>
      <li>One</li>
      <li>Two</li>
    </ul>
  </div>
  <div id="right-div">...</div>
</div>

to add nested divs.

Then we write

#wrapper {
  display: flex;
  align-items: center;
  border: 1px solid green;
}

#left-div {
  border: 1px solid blue;
}

#right-div {
  border: 1px solid red;
}

to make the outer div a flex container with display: flex;.

We vertically center the inner divs with align-items: center;.

To apply CSS page-break to print a table with lots of rows, we set the page-break-inside and page-break-after property.

For instance, we write

table {
  page-break-inside: auto;
}
tr {
  page-break-inside: avoid;
  page-break-after: auto;
}

to set the page-break-inside property to auto to let the browser decide where to add the page break.

And we set page-break-inside to avoid to stop page from breaking in the table row.

To scale a div’s height proportionally to its width using CSS, we use the aspect-ratio property.

For instance, we write

.my-div1 {
  width: 100px;
  aspect-ratio: 16/9;
  background-color: black;
  margin-top: 10px;
}

to set the aspect ratio of the div to 16:9 with aspect-ratio: 16/9;.

To push a footer to the bottom of the page when content is short or missing with CSS, we use flexbox.

For instance, we write

<div class="flex-wrapper">
  <div class="container">The content</div>
  <div class="footer">The Footer</div>
</div>

to add nested divs.

Then we write

.flex-wrapper {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  justify-content: space-between;
}

to make the outer div a flex container with display: flex;

We set its min height with min-height: 100vh;.

And we set its flex direction to vertical with flex-direction: column;.

We make the inner divs spread vertically apart with justify-content: space-between;.

To center fixed div with dynamic width with CSS, we set the margin.

For instance, we write

#example {
  position: fixed;
  right: 0;
  left: 0;
  margin-right: auto;
  margin-left: auto;
  min-height: 10em;
  width: 90%;
}

to set the margin-left and margin-right properties to auto and set left and right to 0 to center the fixed position element.

We set the width and min-height to set the dimensions of it.

To fix :last-child not working as expected with CSS, we should make sure the element we’re selecting is the last element.

For instance, we write

<div>
  <a></a>
  <a>This will be selected</a>
</div>

to add 2 a elements into the div.

Then we write

div a:last-child {
}

to select the last a element in the div with div a:last-child.

To target a specific column or row in CSS Grid Layout, we use grid-row.

For instance, we write

div[style*="display:grid"]:grid-row(3) {
  background-color: blue;
}

div[style*="display:grid"]:grid-column(3) {
  background-color: green;
}

to select grid row 3 with :grid-row(3) and we select grid columnd 3 with :grid-column(3).

To style the form with the label above inputs with JavaScript, we use flexbox.

For instance, we write

<form id="survey-form1">
  <label for="name1">Name</label>
  <input type="text" id="name1" />

  <label for="email1">Email</label>
  <input type="email" id="email" />
</form>

<form id="survey-form2">
  <div class="inputPair">
    <label for="name2">Name2</label>
    <input type="text" id="name2" />
  </div>
  <div class="inputPair">
    <label for="email2">Email2</label>
    <input type="email" id="email2" />
  </div>
</form>

to add forms with labels and inputs.

Then we write

#survey-form1 label {
  display: flex;
  flex-direction: column;
}

#survey-form2 {
  display: flex;
  flex-direction: row;
}

.inputPair {
  display: flex;
  flex-direction: column;
  margin-right: 10px;
}

to make the divs with class inputPair flex containers with display: flex;

And we add flex-direction: column; to make the label stay above the input.