mark required fields

dabblet.css

/**
 * mark required fields
 */

label
{
	display: inline-block;
	position: relative;
	width: 9rem;
}

label::after
{
	content: '*';
	position: absolute;
	right: 0.5rem;
}

input
{
	position: relative;
	z-index: 0;
}

input:not([required])
{
	box-shadow: -2rem 0 0 0 white;
}

button
{
	margin-left: 9rem;
}

dabblet.html

<form>
	<p>
		<label for="required-field">required field</label>
		<input id="required-field" required="required"/>
	</p>
	<p>
		<label for="not-required-field">not required field</label>
		<input id="not-required-field"/>
	</p>
	<button type="submit">submit</button>
</form>

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}