page: txp5
form: txp5_scss
// forms
button,
[type="submit"] {
cursor: pointer;
border: var(--border-width) solid var(--clr-border);
color: var(--clr-text);
padding: var(--base-unit--ss);
// &:hover {
// background-color: var(--clr-brand);
// }
}
[type="submit"] {
padding-left: var(--base-unit--s);
padding-right: var(--base-unit--s);
text-align: left;
cursor: pointer;
background-color: var(--clr-brand);
}
label {
display: inline-block; // allow margins, and for beam or column placement by parent class
}
input,
textarea {
font-family: var(--font-input);
padding: var(--base-unit--ss);
border: var(--border-width) solid var(--clr-border);
border-radius: 0;
color: inherit;
@media (max-width: 960px) {
padding: calc(var(--base-unit--ss)/2) var(--base-unit--ss);
}
&:placeholder {
font-family: var(--sans);
}
&:focus {
animation: focus .9s ease-out forwards;
outline: calc(var(--border-width) *2) solid var(--clr-brand);
//outline: none;
}
}
// fix inputs with a large size attribute
@media (max-width: 640px) {
input[size="64"],
input[size="32"],
textarea[cols="40"] {
//width: clamp(18ch, 90vw, 32ch);
width: 100%;
}
}
textarea {
appearance: none;
width: 100%;
//height: auto;
min-height: calc(var(--base-unit)* 5.5);
// &[rows="16"] {
// height: auto; // calc(var(--base-unit)* 5.5);
// }
max-height: 75vh;
padding-top: var(--base-unit--ss);
padding-bottom: var(--base-unit);
vertical-align: top;
//border: var(--border-width) solid currentcolor;
&:empty {
min-height: initial;
}
&:focus {
min-height: calc(var(--base-unit)* 12);
}
}
// auto-growing textarea see https://chriscoyier.net/2023/09/29/css-solves-auto-expanding-textareas-probably-eventually/
.txp-form-field-value:has(textarea) {
display: grid;
&:after {
content: attr(data-replicated-value) " "; // Needed to preventy jumpy behavior
white-space: pre-wrap;
visibility: hidden; // Hidden from view, clicks, and screen readers
}
& > textarea {
resize: none; //user resizing breaks auto sizing
overflow: hidden; // hide Firefox scrollbar on growth
}
&>textarea,
&:after {
/* Identical styling may be required if modifying core */
grid-area: 1 / 1 / 2 / 2; // Place on top
}
}
select {
width: max-content;
appearance: none;
border: var(--border-width) solid var(--clr-border);
color: var(--clr-text);
border-radius: 0;
padding: var(--base-unit--ss);
padding-right: var(--base-unit);
background-repeat: no-repeat;
background-position: calc(100% - var(--base-unit--ss)) center;
background-size: .75em;
// background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 7l4 4 4-4-1.5-1.5L8 8 5.5 5.5'/%3E%3C/svg%3E");
background-image: url('data:image/svg+xml;base64,ICA8c3ZnIHZpZXdCb3g9IjAgMCAxMyA3IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxnIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBvbHlsaW5lIHN0cm9rZT0iIzAwMDAwMCIgcG9pbnRzPSIwIDAuNjIyNzQxNjk5IDYuMjgxMjUgNi41IDEyLjU2MjUgMC42MjI3NDE2OTkiPjwvcG9seWxpbmU+PC9nPjwvc3ZnPgo=');
&:hover {
border-color: var(--clr-brand);
}
//
@media (max-width: 960px) {
padding: calc(var(--base-unit--ss)/2) var(--base-unit--ss);
}
@media (prefers-color-scheme: dark) {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M4 7l4 4 4-4-1.5-1.5L8 8 5.5 5.5'/%3E%3C/svg%3E");
}
}
[type="checkbox"],
[type="radio"] {
margin: 0;
accent-color: var(--clr-brand);
}
// *:has(> select) [type="submit"] {
// text-align: left;
// cursor: pointer;
// }
// .comThanks,
// .comError {}
@keyframes focus {
from {
background-color: var(--clr-brand);
}
to {
background-color: var(--clr-bg);
}
}
Source html
<div class="b_typeset">
<p>
<label>Label</label>
<input type="text" placeholder="Abstract" />
</p>
<p class="txp-form-field-value">
<label>Label</label>
<textarea onInput="this.parentNode.dataset.replicatedValue = this.value" placeholder="Expressionism"></textarea>
</p>
<p>
<label>Label</label>
<input type="text" value="Gothic" />
</p>
<p>
<label>Label</label>
<input class="input-year" id="year" name="year" type="text" inputmode="numeric" pattern="[0-9]{4}" size="4" maxlength="4" title="Year" placeholder="yyyy" tabindex="0" value="2024"> <span role="separator">/</span>
<input class="input-month" id="month" name="month" type="text" inputmode="numeric" pattern="(0[1-9]|1[012])" size="2" maxlength="2" title="Month" placeholder="mm" tabindex="0" value="05"> <span role="separator">/</span>
<input class="input-day" id="day" name="day" type="text" inputmode="numeric" pattern="(0[1-9]|[12][0-9]|3[01])" size="2" maxlength="2" title="Day" placeholder="dd" tabindex="0" value="31">
</p>
<p class="txp-form-field-value">
<label>Label</label>
<textarea onInput="this.parentNode.dataset.replicatedValue = this.value">Neo-dada expressionism neo-geo neo-impressionism performance art, international gothic gothic art neo-classicism historicism, stuckism neoism expressionism. Romanticism new media art metaphysical art nonconformism de stijl rococo , maximalism barbizon school ottonian dadaism. Pre-raphaelites postminimalism renaissance action painting expressionism, pointilism tachisme street art deformalism, lowbrow secularism ottonian</textarea>
</p>
<p>
<label>Label</label>
<input type="checkbox" />
</p>
<p>
<label>Label</label>
<input type="radio" />
</p>
<p>
<input type="submit" value="Dada" />
<button>Modernism</button>
</p>
<p>
<select>
<option value="articles">Monumentalism </option>
<option value="nodes">Realism</option>
<option value="txpstyle">Neue Slowenische Kunst</option>
</select>
</p>
</div>