18/18 91% понять не могу что не так. Мб кто посмотрит ?

rko43 · 10.Июль.2018 07:33:31

Собственно сам код CSS:
Посмотрел другие коды-вроде все так же,но 100% не показывает

body {
width: 550px;
}

form {
width: 400px;
margin: 0 auto;
padding: 20px;
border-radius: 10px;
background-color: #ffffff;/белый/
box-shadow: 0 0 10px #cccccc;/светло-серый/
}

fieldset {
padding: 10px;
border: 1px solid #34495e;/темно-синий/
border-radius: 5px;
}

fieldset legend {
color: #34495e;/темно-синий/
}

.half-width {
display: inline-block;
width: 50%;
margin-right: -4px;
}

label
{
display: block;
margin-bottom: 5px;
margin-top: 10px;
}

.half-width>input
{
display: none;
}
.half-width>input+label
{
vertical-align: middle;
color: #7f8c8d;/серый текст/
}

.half-width>input+label::before
{
content: “”;
display: inline-block;
width: 7px;
height: 7px;
margin-right: 8px;
vertical-align: middle;
border: 3px solid #ffffff;/белая рамка/
box-shadow: 0 0 0 3px #bdc3c7;/светло-серая тень/
}

input[type=“radio”]+label::before {
border-radius: 50%;
}

.half-width>input:checked+label::before
{
background: #1abc9c;/ярко-зеленый фон/
box-shadow: 0 0 0 3px #1abc9c;/ярко зеленая тень/
}

input:checked+label {
color: #1abc9c;/зеленый цвет текста/
}
.half-width>input:disabled+label::before
{
box-shadow: 0 0 0 3px #ecf0f1;/почти белая тень/
}

.half-width input:disabled+label
{
color: #ecf0f1;/светло-серый цвет текста/
}

input[type=“text”]
{
width: 95%;
height: 24px;
margin-bottom: 10px;
padding: 2px 5px;
color: #000;
border: 2px solid #bdc3c7;/темно-серая рамка/
border-radius: 5px;
vertical-align: middle;
display: block;
margin-bottom: 5px;
margin-top: 10px;
}

input[type=“text”]:required {
border-color: #e74c3c;/красная рамка/
}

input[type=“text”]:disabled {
color: #bdc3c7;/светло-серый цвет текста/
background: #f5f5f5;/дымчато-белый фон/
border-color: #ecf0f1;/светло-серая рамка/
}

input[type=“text”]:invalid {
color: #c0392b;/красный текст/
background: #f2a097;/светло-красный фон/
border-color: #e74c3c;/красная рамка/
}

Прошло 5 минут…пришлось добавить следующее:
в fieldset строчку в конце

fieldset {
padding: 10px;
border: 1px solid #34495e;/темно-синий/
border-radius: 5px;
padding-bottom:15px;
}

и в конце основного css кода

label+input[type=“text”]:first-of-type{
margin-top:0px;
}

я так полагаю это не нормально,но результата в 100% добился
Ну а по теме собсно посмотрите,плз,код,подскажите что не так было,чтоб без бубна в конце кода…

Valery_S · 10.Июль.2018 08:23:40

Нужно было просто подобрать селекторы – свойства и значения в правилах не изменять…

Уберите свойства, которые Вы дописали и всё будет работать…

Комментарии правильно пишутся так: /* какой-то текст */

После добавленных свойств:

display: block;
margin-bottom: 5px;
margin-top: 10px;

Вам пришлось всё исправлять…

rko43 · 10.Июль.2018 08:52:48

*в коде с комментариями все ок,это тут видимо так отображаются…
**без того,что я дописал - выдает 91%. Код не рабочий.
***код выше он установлен по-умолчанию,его я не менял,был только перенесен input[type=“text”] в код пониже…

Valery_S · 10.Июль.2018 09:33:27

Я не про label писал…

По умолчанию вот так:

selector {
    width: 95%;
    height: 24px;
    margin-bottom: 10px;
    padding: 2px 5px;
    color: #000;
    border: 2px solid #bdc3c7;
    border-radius: 5px;
    vertical-align: middle;
}

зачем у Вас в этом правиле ещё три строки свойств появилось?
Не нужно было переносить свойства label в input…

rko43 · 10.Июль.2018 09:42:08

По форуму полазил-у многих так перенесено…сути это не меняет,код так и так не работает чтот)

Valery_S · 10.Июль.2018 09:54:36

Ещё раз…

Ваш код я скопировал, вставил в минибраузер.
Убрал все комментарии, заменил все испорченные форумом кавычки.
Убрал всё что Вы добавили в конце и через 5 минут
Убрал из input[type=“text”] лишние свойства:

input[type=“text”] {
width: 95%;
height: 24px;
margin-bottom: 10px;
padding: 2px 5px;
color: #000;
border: 2px solid #bdc3c7;/темно-серая рамка/
border-radius: 5px;
vertical-align: middle;
display: block;
margin-bottom: 5px;
margin-top: 10px;
}

Получил 100%.

rko43 · 10.Июль.2018 10:06:44

Забавно,но проделал сейчас все тоже самое- результат 91% ))

Valery_S · 10.Июль.2018 10:54:07

Где-то, что-то в коде успело потеряться…
Прицепите код ещё раз… должно работать…

rko43 · 10.Июль.2018 11:06:10

body {
width: 550px;
}

form {
width: 400px;
margin: 0 auto;
padding: 20px;
border-radius: 10px;
background-color: #ffffff;
box-shadow: 0 0 10px #cccccc;
}

fieldset {
padding: 10px;
border: 1px solid #34495e;
border-radius: 5px;
padding-bottom:15px;
}

fieldset legend {
color: #34495e;
}

.half-width {
display: inline-block;
width: 50%;
margin-right: -4px;
}

label,
input[type=“text”]
{
display: block;
margin-bottom: 5px;
margin-top: 10px;
}

.half-width>input
{
display: none;
}

.half-width>input+label
{
vertical-align: middle;
color: #7f8c8d;
}

.half-width>input+label::before
{
content: “”;
display: inline-block;
width: 7px;
height: 7px;
margin-right: 8px;
vertical-align: middle;
border: 3px solid #ffffff;
box-shadow: 0 0 0 3px #bdc3c7;
}

input[type=“radio”]+label::before {
border-radius: 50%;
}

.half-width>input:checked+label::before
{
background: #1abc9c;
box-shadow: 0 0 0 3px #1abc9c;
}

input:checked+label {
color: #1abc9c;
}
.half-width>input:disabled+label::before
{
box-shadow: 0 0 0 3px #ecf0f1;
}

.half-width input:disabled+label
{
color: #ecf0f1;
}

input[type=“text”]
{
width: 95%;
height: 24px;
margin-bottom: 10px;
padding: 2px 5px;
color: #000;
border: 2px solid #bdc3c7;
border-radius: 5px;
vertical-align: middle;
}

input[type=“text”]:required {
border-color: #e74c3c;
}

input[type=“text”]:disabled {
color: #bdc3c7;
background: #f5f5f5;
border-color: #ecf0f1;
}

input[type=“text”]:invalid {
color: #c0392b;
background: #f2a097;
border-color: #e74c3c;
}

Valery_S · 10.Июль.2018 11:20:16

Откуда такая любовь к этим трём строкам?

display: block;
margin-bottom: 5px;
margin-top: 10px;

Вы их убрали из input[type=“text”], но сам селектор input[type=“text”] присоединили к этим правилам:

label,
~~input[type=“text”]~~
{
display: block;
margin-bottom: 5px;
margin-top: 10px;
}

rko43 · 10.Июль.2018 11:31:05

ммм,так она там изначально вроде была…
без нее вообще не прокатывает…
все,готово,кавычки при копировании заменяются…
действительно,похоже сам инпут к лейблу прилепил и думал что так и было
ну а если смотреть на код- хорош ? без замечаний ?
и да,Спасибо за отклик!

Valery_S · 10.Июль.2018 13:05:22

Код как код…
Разве, что в этом испытании можно обойтись без излишних уточнений
Например:
input[type="text"]:required можно определить проще – input:required.

И здесь не нужны такие ограничения:
.half-width>input – достаточно .half-width input.