JSFiddle - React, Tailwind, and code Playground
HTML
<form id="payment">
<fieldset>
<legend>Персональные данные</legend>
<ol>
<li>
<label for="name">Имя</label>
<input id="name" name="name" type="text" placeholder="Введите имя" required autofocus>
</li>
<li>
<label for="surname">Фамилия</label>
<input id="surname" name="surname" type="text" placeholder="Введите фамилию" required >
</li>
<li>
<label for="email">E-mail</label>
<input id="email" name="email" type="email" placeholder="[email protected]" required>
</li>
<li>
<label for="phone">Телефон (дом.)</label>
<input id="phone" name="phone" type="tel" placeholder="Eg. +064511111" required>
</li>
<li>
<label for="Mobphone">Телефон (моб.)</label>
<input id="Mobphone" name="phone" type="tel" placeholder="Eg. +380661111111" required>
</li>
</ol>
</fieldset>
<fieldset>
<legend>Место жительства</legend>
<ol>
<li>
<label for="country">Страна</label>
<select required name="Country" id="country">
<option value ="" disabled>Выберите cтрану...</option>
<option value="t1">Опция №1</option>
<option value="t2">Опция №2</option>
<option value="t3">Опция №3</option>
<option value="t4">Опция №4</option>
...
CSS
html, body, h1, form, fieldset, legend, ol, li {
margin: 0;
padding: 0;
}
body {
background: #ffffff;
color: #111111;
font-family: Georgia, "Times New Roman", Times, serif;
padding: 20px;
}
form#payment {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
counter-reset: fieldsets;
padding: 20px;
width: 450px;
background: #696969;
}
form#payment fieldset {
border: none;
margin-bottom: 10px;
}
form#payment fieldset:last-of-type {
margin-bottom: 0;
}
form#payment legend {
color: #FFA500;
font-size: 16px;
font-weight: bold;
padding-bottom: 10px;
text-shadow: 3px 3px 3px #000000;
}
form#payment > fieldset > legend:before {
content: "Шаг " counter(fieldsets) ": ";
counter-increment: fieldsets;
}
form#payment > fieldset > legend:before {
content: "Шаг " counter(fieldsets) ": ";
counter-increment: fieldsets;
}
form#payment ol li {
background: #71b8ff;
background: rgba(255,255,255,.3);
border-color: #c6e3ff;
border-color: rgba(83,134,139,.7);
border-style: solid;
border-width: 2px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
line-height: 30px;
list-style: none;
padding: 5px 10px;
margin-bottom: 2px;
}
form#payment ol ol li {
background: none;
border: none;
float: left;
}
form#payment label {
float: left;
font-size: 13px;
width: 160px;
}
form#payment fieldset fieldset label {
background:none no-repeat left 50%;
line-height: 20px;
padding: 0 0 0 30px;
width: auto;
}
form#payment...
JavaScript
$(document).ready(function()
{
$('input, select, textarea').focus(function()
{
$(this).parent('li').addClass('active');
});
$('input, select, textarea').blur(function()
{
$(this).parent('li').removeClass('active');
});
});