CSS Text Fields Components

<!--
stylify-variables
	green: '#52c41a',
	red: '#b3261e',
/stylify-variables
 -->

<!-- Valid/invalid --->
<div class="position:relative display:flex">
	<input id="text1" type="text" placeholder="Label" class="width:100% padding:12px border:2px_solid_#000 border-radius:4px min-height:40px [&::placeholder]{color:transparent} [&:not(:placeholder-shown):valid]{border-color:$green} [&:not(:placeholder-shown):invalid]{border-color:$red} [&:focus+label,&:not(:placeholder-shown)+label]{top:0;background:#fff}">
	<label for="text1" class="position:absolute top:50% transform:translateY(-50%) max-width:calc(100%_-_16px) will-change:top transition:top_0.2s,background_0.2s left:8px padding:0_4px">Input</label>
</div>

<br>

<div class="position:relative display:flex">
	<input id="date1" type="date" placeholder="Date" required class="background:#fff width:100% padding:12px border:2px_solid_#000 border-radius:4px min-height:40px [&:valid]{border-color:$green} [&:focus+label,&:not(:placeholder-shown)+label]{top:0;background:#fff}">
	<label for="date1" class="position:absolute top:50% transform:translateY(-50%) max-width:calc(100%_-_16px) will-change:top transition:top_0.2s,background_0.2s left:8px padding:0_4px">Date</label>
</div>

<br>

<div class="position:relative display:flex">
	<select id="option1" required class="background:#fff width:100% padding:12px border:2px_solid_#000 border-radius:4px min-height:40px [&:valid]{border-color:$green} [&:focus+label,&:not(:placeholder-shown)+label]{top:0;background:#fff}">
		<option value="">---</option>
		<option value="1">First</option>
		<option value="2">Second</option>
	</select>
	<label for="option1" class="position:absolute top:50% transform:translateY(-50%) max-width:calc(100%_-_16px) will-change:top transition:top_0.2s,background_0.2s left:8px padding:0_4px">Select</label>
</div>

<br>

<div class="position:relative display:flex">
	<textarea id="text2" placeholder="Label" class="width:100% padding:12px border:2px_solid_#000 border-radius:4px min-height:40px max-height:400px resize:vertical [&:not(:placeholder-shown):valid]{border-color:$green} [&:not(:placeholder-shown):invalid]{border-color:$red} [&::placeholder]{color:transparent} [&:focus+label,&:not(:placeholder-shown)+label]{top:0;background:#fff}"></textarea>
	<label for="text2" class="position:absolute top:50% transform:translateY(-50%) max-width:calc(100%_-_16px) will-change:top transition:top_0.2s left:8px padding:0_4px">Textarea</label>
</div>

<br>

<!-- Disabled -->
<div class="position:relative display:flex">
	<input id="text3" disabled type="text" placeholder="Label" class="width:100% padding:12px border:2px_solid_#000 border-radius:4px min-height:40px [&::placeholder]{color:transparent} [&:disabled]{border-color:#e3dfe3} [&:disabled+label]{color:#aaa7ab} [&:not(:placeholder-shown):valid]{border-color:$green} [&:not(:placeholder-shown):invalid]{border-color:$red} [&:focus+label,&:not(:placeholder-shown)+label]{top:0;background:#fff}">
	<label for="text3" class="position:absolute top:50% transform:translateY(-50%) max-width:calc(100%_-_16px) will-change:top transition:top_0.2s,background_0.2s left:8px padding:0_4px">Input - disabled</label>
</div>

<br>

<div class="position:relative display:flex">
	<textarea id="text4" disabled placeholder="Label" class="width:100% padding:12px border:2px_solid_#000 border-radius:4px min-height:40px max-height:400px resize:vertical [&:disabled]{border-color:#e3dfe3} [&:disabled+label]{color:#aaa7ab} [&:not(:placeholder-shown):valid]{border-color:$green} [&:not(:placeholder-shown):invalid]{border-color:$red} [&::placeholder]{color:transparent} [&:focus+label,&:not(:placeholder-shown)+label]{top:0;background:#fff}"></textarea>
	<label for="text4" class="position:absolute top:50% transform:translateY(-50%) max-width:calc(100%_-_16px) will-change:top transition:top_0.2s left:8px padding:0_4px">Textarea - disabled</label>
</div>

<!--
stylify-variables
	green: '#52c41a',
	red: '#b3261e',
/stylify-variables

stylify-components
	'field': `
		padding:12px width:100% background:#fff border:2px_solid_#000 border-radius:4px min-height:40px
	`,
	field--text: `
		&::placeholder { color:transparent }
		&:not(:placeholder-shown):valid { border-color:$green }
		&:not(:placeholder-shown):invalid { border-color:$red }
		&:focus+label, &:not(:placeholder-shown)+label { top:0 background:#fff }
		&:disabled {
			border-color:#e3dfe3
			+ label { color:#aaa7ab}
		}
	`,
	'field--date': `
		&:valid { border-color:$green }
		&:focus+label, &:not(:placeholder-shown)+label { top:0 background:#fff }
	`,
	'field--select': `
		&:valid { border-color:$green }
		&:focus+label, &:not(:placeholder-shown)+label { top:0 background:#fff }
	`,
	field__label: 'position:absolute top:50% transform:translateY(-50%) max-width:calc(100%_-_16px) will-change:top transition:top_0.2s left:8px background:#fff padding:0_4px',
	field__wrapper: 'position:relative display:inline-flex'
/stylify-components
 -->

<!-- Valid/invalid --->
<div class="field__wrapper">
	<input id="text1" type="text" placeholder="Label" class="field field--text">
	<label for="text1" class="field__label">Input</label>
</div>

<br><br>

<div class="field__wrapper">
	<input id="date1" type="date" placeholder="Date" required class="field field--date">
	<label for="date1" class="position:absolute top:50% transform:translateY(-50%) max-width:calc(100%_-_16px) will-change:top transition:top_0.2s,background_0.2s left:8px padding:0_4px">Date</label>
</div>

<br><br>

<div class="field__wrapper">
	<select id="option1" required class="field field--select">
		<option value="">---</option>
		<option value="1">First</option>
		<option value="2">Second</option>
	</select>
	<label for="option1" class="position:absolute top:50% transform:translateY(-50%) max-width:calc(100%_-_16px) will-change:top transition:top_0.2s,background_0.2s left:8px padding:0_4px">Select</label>
</div>

<br><br>

<div class="field__wrapper">
	<textarea id="text2" placeholder="Label" class="field field--text resize:vertical"></textarea>
	<label for="text2" class="field__label">Textarea</label>
</div>

<br><br>

<!-- Disabled -->
<div class="field__wrapper">
	<input id="text3" disabled type="text" placeholder="Label" class="field field--text">
	<label for="text3" class="field__label">Input - Disabled</label>
</div>

<br><br>

<div class="field__wrapper">
	<textarea id="text4" disabled placeholder="Label" class="field field--text resize:vertical"></textarea>
	<label for="text4" class="field__label">Textarea - Disabled</label>
</div>