Почему css не видит стили для input?

Помогите, пожалуйста. Не могу найти ошибку.

CSS не видит input.

Код html:

<div class="sidebar">
 
 <h2>Поиск</h2>
 <form method="post" action="#" id="search_form">
 <input type="search" name="search_fieled" placeholder="ваш запрос"/>
 <input type="submit" class="btn" value="найти"/>
 </form>
 </div>

Код CSS:

input[type="text"], input[type="password"], input[type="search"] {
  color: #5d5d5d;
  width: 60%;
  padding: 8px;
}

Заранее спасибо

html

css

4 ответов

Привет, покажи весь код целиком и html и css, может div какой-то не закрыт или Точка с запятой где-то в css не стоит, я помогу найти где ошиблась

Основная ошибка здесь:

* {
 margin: 0;
 padding: 0;


input[type="text"], input[type="password"], input[type="search"] {
  color: #5d5d5d;
  width: 60%;
  padding: 8px;
} 


}

Так должно быть:

* {
  margin: 0;
  padding: 0;
}

input[type="text"], input[type="password"], input[type="search"] {
  color: #5d5d5d;
  width: 60%;
  padding: 8px;
}

+ стилей не хватает для btn, вот тут можно посмотреть в "живую":

https://fructcode.com/ru/courses/html-and-css/right-block/

Вот html:

<!DOCTYPE html>
 <html lang="ru">
 <head>
 <meta charset="UTF-8">
 <meta name ='description' content="Киномонстр - это портал о кино">
 <link rel="stylesheet" type="text/css" href="assets/css/style.css">
 <title>Document</title>
 </head>
 <body>
 <div class="main">
 <!-- Верхняя часть сайта -->
 <div class="header">
 <div class="logo">
 <div class="logo_text">
 <h1><a href="/">КиноМонстр</a></h1>
 <h2>Кино - наша страсть!</h2>
 </div>
 </div> 
 <!--  Боковое меню -->
 <div class="menubar">
 <ul class="menu">
 <li class="selected"><a href="#">Главная</a></li>
 <li><a href="#">Фильмы</a></li>
 <li><a href="#">Сериалы</a></li>
 <li><a href="#">Рейтинг фильмов</a></li>
 <li><a href="#">Контакты</a></li>
 </ul>
 </div>
 </div>
 <!-- Класс, где будет храниться весь контент сайта -->
 <div class="site_content">
 
 <div class="sidebar_container">
 
 <div class="sidebar">
 
 <h2>Поиск</h2>
 <form method="post" action="#" id="search_form">
 <input type="search" name="search_fieled" placeholder="ваш запрос"/>
 <input type="submit" class="btn" value="найти"/>
 </form>
 </div>


 </div>


 </div>


 </div>
 </body>
 </html>

Вот css:

* {
 margin: 0;
 padding: 0;


input[type="text"], input[type="password"], input[type="search"] {
  color: #5d5d5d;
  width: 60%;
  padding: 8px;
} 


}


.header {
 background-color: darkslateblue;
 height: 177px;
 font-size: 0.8em;
 margin-left: 0px;
 margin-right: 0px;
 min-width: 900px;
}


.main, .logo, .menubat, .site_content, .footer {
 margin-left: auto;
 margin-right: auto;
}


.logo {
 width: 880px;
 padding-bottom: 40px;
}


.logo h1, .logo h2 {
 font: normal 300% 'century gothic', arial, sens-serif;
 margin:0 0 0 9px;
}


.logo_text h1, .logo_text h1 a, .logo_text h1 a:hover {
 padding: 22px 0 0 0;
 color:#fff;
 letter-spacing: 0.1em;
 text-decoration: none; 
}


.logo_text h2 {
 font-size: 0.9em;
 padding: 4px;
 color: #999;
}


.menubar {
 width: 900px;
 height: 46px;
}


ul.menu {
 float: right;
}


ul.menu li{
 float: left;
 padding: 0 0 0 9px;
 list-style: none;
 margin: 1px 2px 0 0;
}


ul.menu li { 
 font: normal 100% 'trebuchet ms', sans-serif;
 display: block;
 height: 20px;
 padding: 6px 35px 5px 28px;
 color: #fff;
 text-decoration: none;
}
/*Задаем стиль для активной ссылки, чтобы она подсвечивалась другим цветом при использовании*/
ul.menu li.selected a{
 color:#aeb002;
}


/*Ссылка горит другим цветом при наведении на ссылку*/
ul.menu li a:hover {
 color: #e4ec04;
}


/*Начинаем создавать панель справа. Стили для сайт-контента*/
.site_content {
 width: 880px;
 overflow: hidden; /*для того, чтобы скрыть контент который выходит за рамки заданного размера*/
 margin: 20px auto 0 10px;
 background-color: white;
}


.sidebar_container {
 float: right;
 width: 220px;


}


.sidebar {
 float: right;
 width: 222px;
 padding: 5%;
 margin: 0 0 16px 0;
 border: solid 1px #f2f2f2; /*бордер - рамка, солид - тип рамки, 1px - размер рамки*/
 border-radius: 5px; /*чтобы обострить/закруглить углы рамки*/
 background-color: #f9f9f9;


}

спасибо, сорри за комменты))

Спасибо добрый человече!)) да, только что взяла скопипастила код автора и поняла, что ошибка была в css, но не успела ее найти)) теперь буду знать как правильно искать ошибки. Еще раз спасибо!)