自定义表单html:_掌握通用兄弟选择器：自定义表单元素

自定义表单html:

最强大且使用不足CSS选择器之一是通用的同级组合器： ~ 。 在接下来的教程中，我将探讨使用~不同方法，以创建不仅在视觉上吸引人而且功能实用的组件。 本教程将介绍表单元素。 单选，复选框和常规输入。

我们将学到很多东西：现代CSS选择器， will-change属性，SVG的stroke属性，输入状态等等！

在我们开始之前..

快速免责声明：这些CSS效果可能会在旧版浏览器中起作用，也可能无法起作用–我已经在最新版本的Chrome，Firefox和Safari中对其进行了测试。

我将使用Haml （HTML编译器）和Sass（CSS预处理器）来加快编码过程！ 演示将使用Haml，而任何内联代码将使用常规HTML。

我还将使用惊人的AutoPrefixer代替供应商前缀。 如果您使用CodePen，请确保进入笔的设置，单击CSS，然后选择AutoPrefixer。

无线电输入

我们将从最基本的表单元素之一开始：无线电输入。 有两种主要的视觉状态（选中和未选中），以及两种中间状态（悬停和单击/活动-单击的外观与选中状态相似）。

SVG版本

第一步是设置我们HTML。 您将需要一个主外部容器和一个带有两个子容器的内部容器：一个包含输入和视觉元素的div以及一个用于输入的label 。 我喜欢对外部容器使用fieldset 。 确保为输入添加一个与标签上的for属性匹配的ID。

<fieldset>
    <div class="container">
		<div class="svg">
			<input id="radio-svg" type="radio" name="option"/>
			<div></div>
			<svg viewBox="0 0 24 24">
				<circle cx="12" cy="12" r="8"></circle>
                <circle cx="12" cy="12" r="8"></circle>
            </svg>
        </div>
		<label for="radio-svg">SVG</label>
    </div>
</fieldset>

下一步是隐藏默认输入，添加一些基本的视觉样式，并隐藏仅在选择单选输入时才会显示的额外元素。 想法是使输入不可见，但将其放置在可视元素的顶部 ，以便单击单选输入看起来就像单击可视单选选项。 我们可以通过将position: relative对于.svg和position: absolute设置为输入，然后隐藏输入来实现。

注意 ：您可以选择任何格式。 我选择了一种模仿默认收音机的基本圆形样式，但它比较扁平。

我们将使用Sass设置一些颜色变量； 所选收音机有几种灰色和亮蓝色。 我们还将为默认单位设置一个变量$p -12px是一个不错的数字，因为它可以被许多不同的数字（1、2、3、4、6）整除。

我直接将主要变量放到了嵌入中，但是可以在这里找到其他样式，也可以单击CodePen页面，单击右上角的“ 设置” ，然后单击“ CSS”选项卡以查看其他样式表。

我们将第一个圆圈变成浅灰色，将第二个圆圈变成明亮的蓝色，然后通过设置transform: scale(0)隐藏第二个圆圈。 稍后，我们将重新设置圆的动画，因此现在设置比例很重要。

设置完所有这些之后，我们需要确定每种状态的视觉样式。 在本例中，我决定将鼠标悬停时，浅灰色的圆圈应变为浅蓝色； 单击时，蓝色圆圈放大，灰色背景变为白色，然后保持选中状态。 从收音机中删除选中状态的唯一方法是单击另一个收音机，在这种情况下，蓝色和白色应该会淡出。

我们将首先设置颜色，然后在所有状态都具有颜色后进行动画处理。 这是波浪号~派上用场的地方。 这个通用的同级选择器（ 同级组合器 ）将选择第二个元素，只要它在某个位置的第一个元素之前，并且它们共享一个公共父元素。 当输入悬停在输入上方时，我们使用input:hover ~ div选择视觉元素。

尝试单击第一个单选按钮，然后单击第二个单选按钮，您应该可以清楚看到悬停状态和活动/检查状态。

最后一步是为每个状态设置动画。 设置所有这些不同状态的动画的关键是默认情况下设置未选中的过渡，并在单击输入时设置选中的过渡。 我正在使用一个名为will-change的新CSS属性，以使浏览器知道我将设置动画的属性。

HTML版本

您也可以不使用SVG进行此自定义单选输入。 设置类似：

<fieldset>
    <div class="container">
    	<div class="svg">
			<input id="radio-html" type="radio" name="option"/>
			<div></div>
			<div></div>
            <div></div>
        </div>
		<label for="radio-html">HTML</label>
    </div>
</fieldset>

CSS几乎完全一样，只是两个div元素（替换了SVG圆）的样式略有不同。 在这种情况下，我们使用nth-of-type(n)选择不同的div元素，这样我们就不必在HTML中为它们提供一个类。

使用SVG版本时，标记更多，但样式更少； 与HTML版本相反。 结果看起来相同，因此请尝试使用任何一种适合您的编码偏好的方法！

复选框输入

我们将自定义的下一个表单元素是复选框输入。 其状态类似于单选输入的状态：两个主要视觉状态（选中和未选中）和两个中间状态（悬停和点击/活动）。

SVG版本

该设置看起来很像单选输入，但是使用线条而不是圆圈来形成复选标记。

<fieldset>
    <div class="container">
		<div class="svg">
			<input id="checkbox-svg" type="checkbox">
			<div></div>
			<div></div>
			<svg viewBox="0 0 24 24">
				<g>
					<line x1="4.5" x2="9.24" y1="12.5" y2="17.24"></line>
					<line x1="9.24" x2="19.76" y1="17.24" y2="6.73"></line>
				</g>
				<g>
					<line x1="4.5" x2="9.24" y1="12.5" y2="17.24"></line>
					<line x1="9.24" x2="19.76" y1="17.24" y2="6.73"></line>
				</g>
			</svg>
		</div>
		<label for="checkbox-svg">SVG</label>
	</div>
</fieldset>

第一组中的线条将为浅灰色，并且不会设置动画； 单击输入时，第二组中的线将进行动画处理。

还有一个额外的div元素； 我们将使用它来创建点击效果，在该效果中，亮蓝色扩展到背景中。 为了使效果起作用，div必须是一个蓝色圆圈，其宽度和高度要比实际复选框更大，并且外部容器必须具有overflow: hidden; 设置为不显示圆的边缘。 round div应该具有transform: scale(0)设置，类似于收音机。

同样，请根据您的喜好设置其格式。 我决定将复选标记的边缘以及所有的角都弄圆。

下一步是准备动画。 效果与收音机类似，不同之处在于，选中标记而不是扩大圆形，而是将其自身绘制进去。对于此动画，我们需要在SVG线上使用stroke-dashoffset 。

为了设置stroke-dashoffset动画，我们需要每行的长度。 我在CodePen上创建了一个工具来计算长度，但是如果使用已经创建的对勾标记，则较短的行的长度为6.708 ，较长的14.873 。 我们将使用此值来设置stroke-dashoffset和stroke-dasharray 。 这仅对于第一个选中标记是必需的（第二行默认情况下以未选中状态显示）。

单击输入时，我们将stroke-dashoffset设置为0 ，（带有过渡）看起来就像是“绘制”线。 我们还需要在自定义收音机中添加其他状态更改，包括悬停时的背景更改和单击时的圆圈比例。

最后一步是添加所有转换。 同样，我们将默认设置未选中的过渡，并在点击时设置选中的过渡。 与收音机的圆形衰落类似，当未选中时，我们将使选中标记淡出。

HTML版本

您也可以使用一些div元素而不是使用SVG来获得相同的效果。 标记较为简单，但没有明确说明。 第一个空div是扩展的蓝色圆圈，第二个是默认的选中标记，第三个是单击时动画的选中标记。

<fieldset>
    <div class="container">
        <div class="line">
            <input id="checkbox-html" type="checkbox">
            <div></div>
            <div></div>
            <div></div>
        </div>
        <label for="checkbox-html">HTML</label>
    </div>
</fieldset>

我们将使用:before和:after作为复选标记的每个部分，以简化标记，否则将需要四个或更多的空元素来创建两个复选标记。 我们必须手动放置线条并将它们旋转到位，但是您可以使用单个变换来旋转和绘制它们。

符号版本

您也可以使用对勾符号代替旋转div元素！ 从视觉上看 ，它与其他两个不完全相同，但是效果也一样。

<fieldset>
    <div class="container">
		<div class="symbol">
			<input id="checkbox-sym" type="checkbox">
			<div></div>
			<div>&#10003;</div>
			<div>&#10003;</div>
		</div>
		<label for="checkbox-sym">Symbol</label>
	</div>
</fieldset>

注意 ：仅在最后两个div元素中需要HTML符号，但是在下面的演示中，我将其包含在所有三个div中，以便可以将其包含在重复循环中。

由于我们无法将符号画入，因此白色版本会在单击时淡入淡出。 在下面查看所有三个版本！

常规输入

本教程的最后一部分是常规文本输入。 我从Google的Material Line输入中汲取了灵感。 这些输入具有几种不同的状态：默认，活动/焦点（当闪烁的光标可见时）以及微妙的悬停。

该设置甚至比前两种输入样式最小。 我们有一个字段集，输入，标签和边框的div元素。

<fieldset>
  <input id="example" type="text">
  <label for="example">Label</label>
  <div></div>
</fieldset>

下一步是对输入进行样式设置。 这次我们不会隐藏输入，因为我们需要它来显示值。 我们还将创建一个标签，当我们关注输入时该标签会上下移动。 为了使这项工作有效，我们需要将标签准确地放置在输入的顶部。 div边框将具有:after伪元素，当单击输入时，该元素将在边框顶部绘制； 我们将在伪元素上放一个scale(0) ，以准备动画。

如果您尝试单击上面的演示输入并开始输入，您会注意到文本在标签上方键入。 我们将对标签进行动画处理以缩小并在点击时进行平移。 您可以完全使用转换来防止重画，而不是像我一样使用font-size ，但是我发现使用它以及translateY使我看起来更加精确。 我们还将删除div的:after比例，以制作绘图动画。

现在，如果您尝试单击上面的演示输入并再次开始键入，则标签会缩小并向上平滑移动，但是如果您将键入的文本保留在输入中并单击外部，则标签会再次向下移动，从而阻碍了输入。 我们可以使用JavaScript来防止这种行为，但是我们也可以使用一个名为:validCSS输入状态。

我们可以在HTML的输入中添加required作为空属性，或者在Haml中的输入属性中添加:required => true 。 然后，在Sass / CSS中的:focus属性中添加:valid 。 这为我们的输入添加了附加的视觉状态，并且由于它是简单的文本输入，因此唯一有效的状态是输入文本时。

注意 ：由于电子邮件输入具有不同的有效性要求，因此使用其他类型的输入（例如电子邮件输入）将导致此行为中断。

灵感

如果您想使用这些技术来创建自己的输入，但是需要更多的视觉灵感， 请查看 Envato Elements订阅提供的UI工具包 ：

结论

有数十种不同的方式来利用通用的同级选择器，这些选择器是可视的，功能性的或两者兼而有之。 它提供了一种强大的方法来自定义组件，而不必使用CSS和HTML。 在本教程中，我们介绍了三种不同的表单元素。 在下一个中，我们将探索菜单和导航。 如果您有任何疑问或反馈，请随时在下面发表评论！

翻译自: https://webdesign.tutsplus.com/tutorials/mastering-general-sibling-selectors-custom-form-elements--cms-28436

自定义表单html: