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:

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

To disable all form inputs and buttons simultaneously using a boolean flag (e.g., .IsDisabled), wrap your form content in a
element. This is the most efficient method as it automatically propagates the disabled state to all nested interactive elements.

Implementation Snippet

<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>
Why use this? DRY (Don't Repeat Yourself): You only need one {{ if .IsDisabled }}disabled{{ end }} check instead of adding it to every single input, select, and button. Native Browser Support: Browsers automatically prevent interaction and styling (graying out) for all elements inside a disabled fieldset. Maintenance: Adding new fields to the form automatically inherits the disabled logic without extra code. Note: Fields inside a disabled fieldset are not submitted with the form. If you need the data to be sent but not editable, consider using readonly for text inputs (though this does not work for