CSS Tricks

CSS line with text in the middle

    h4 {
      display: flex;
      flex-direction: row;
      color: #c8cfce;
    }
    h4:before, h4:after{
      content: "";
      flex: 1 1;
      border-bottom: 1px solid;
      margin: auto;
    }
    h4:before {
      margin-right: 10px
    }
    h4:after {
      margin-left: 10px
    }

   <h4>or</h4>

CSS no draggable or select

<img
    class="no-select"
    draggable="false"/>

.noselect {
    user-select: none; /* Standard syntax */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
}

Disable Button with CSS

<div class="visible-form">
    <input type="email" 
           value="{{ .LoginForm.Email }}" 
           required 
           placeholder="Email"
           class="form-control"
           autofocus="autofocus"
           name="email"
           id="email">
    <label for="email">Email</label>
    {{ if .LoginForm.PasswordFieldEnabled }}
    <input required
           autocomplete="off"
           placeholder="Password"
           class="form-control"
           type="password"
           name="password"
           id="password">
    <label for="password">Password</label>
    {{ end }}

    <br>
    <input type="submit"
           hx-post="/login"
           hx-target="{{ if .LoginForm.PasswordFieldEnabled }}#toast-container{{ else }}.form-container{{ end }}"
           hx-swap="outerHTML"
           name="commit"
           value="Log in"
           class="button btn-login"
           id="submit-button"
           target="_parent"
           data-disable-with="Log in">
</div>

    input:invalid ~ #submit-button {
         background-color: #d7d7d7;
         color: #a9a9a9; 
         cursor: not-allowed; 
         pointer-events: none; 
         box-sizing: border-box;
    }

Turn two icons into a checkbox

    <label for="password-visible">
        {{ if .LoginForm.PasswordVisible }}
        <img
             id="eye"
             class="fa-eye"
             alt="hide password icon"
             src="/static/images/eye_close_v1.svg"
        />
        {{ else }}
        <img
             id="eye"
             class="fa-eye"
             alt="hide password icon"
             src="/static/images/eye_open_v1.svg"
        />
        {{ end }}
    </label>
    <input name="password-visible"
           id="password-visible"
           type="checkbox"
           hx-put="/login"
           hx-target=".form-container"
           hx-swap="morph:outerHTML"
           hx-trigger="change"
           {{ if .LoginForm.PasswordVisible }}checked{{ end }}>
    {{ end }}

    #password-visible {
        display: none;    
    }

Using REM and EM effectively

When working on an element, you can set everything in that element with EM. Then by setting the element font size with REM you can scale the whole element with just that value without messing up proportions.

Why hidden attribute fails sometimes

Reference

Flexbox inside table cells

Problem: Using display: flex (or inline-block, block, etc.) directly on a <td> breaks table layout.

Why: A <td> is display: table-cell by default. The table layout algorithm relies on cells having that role to compute column widths, row heights, and alignment. Changing the cell’s display makes it no longer a table cell, which can cause:

• Incorrect column width (e.g. the “Actions” column not staying narrow)
• Wrong row height or vertical alignment
• Odd spacing or overflow

Solution: Keep the <td> as a table cell and put a wrapper inside it. Make the wrapper the flex container.

Example (see dashboard.tmpl):

<!-- ❌ Bad: flex on the cell -->
<td class="actions" style="display: flex; gap: 0.5rem;">
  <button>Edit</button>
  <button>Delete</button>
</td>

<!-- ✅ Good: flex on an inner wrapper -->
<td class="actions">
  <div class="actions-inner" style="display: flex; gap: 0.5rem;">
    <button>Edit</button>
    <button>Delete</button>
  </div>
</td>

The <td> stays display: table-cell; only the inner <div> is a flex container, so the table lays out correctly and the buttons still line up horizontally with a gap.

Apply red astrix with only css

label:has(+ input:required)::after,
label:has(+ select:required)::after {
  content: " *";
  color: red;
  font-weight: bold;
}

Disable multiple form fields at once

Disabling Form Fields via

<label for="title">Title</label>
<input type="text" id="title" name="title" value="{{ .Title }}">
<label for="status">Status</label>
<select id="status" name="status">
  <option value="open">Open</option>
  <option value="closed">Closed</option>
</select>
<div class="actions">
  <button type="submit">Save Changes</button>
</div>