Как убрать границу select и изменить цвет?

Ребята, помогите!

Пробую разобраться в css.

Задание: разместить блоки в строку и при этом у второго блока select поменять цвет и убрать границу.
Блоки разместила, но при этом цвет и границы у второго блока убрать не могу, даже при командах: border: none; или outline: none;

html:

<!DOCTYPE html>
<html lang="ru">
<head>
<title>Новостное агентство</title>
<link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
<div id="black-bar">
<div class="fixed-container">
Самые <a href="#">свежие новости </a> в реальном времени
<div id="daytime"> 13.05.2020 20:04 </div>
</div>
</div>


<div>
<div class="fixed-container">
<div class="hui ilo2 "><img id="logo" src="logo.png" alt="logo"></div>
<div class="hui ilo3">
<select>
<option selected="selected">Москва</option>
<option>Санкт-Петербург</option>
</select>
</div>
<div class="hui ilo4"><img id="forecast" src="forecast1.png" alt="forecast icon">+22C</div>
<div class="hui ilo">TEKCT</div>
</div>
</div>


<div class="ilop">
<select>
<option selected="selected">Москва</option>
<option>Санкт-Петербург</option>
</select>
</div>

</body>
</html>

CSS:

html, body {
margin: 0;
padding: 0;
min-width: 1000px;
}

#black-bar {
background-color: black;
color: white;
padding: 20px;
}

#black-bar a {
color: white;
}

#daytime {
float: right;
}

.fixed-container {
width: 960px;
margin: 0 auto;
}

.ui {
display: inline-block;
margin-top: 40px;
}
.ilo {
float:right;
background-color: yellow;
width: 100px;
}

.ilo2{
float: left;
background-color: yellow;
width: 100px;
}

.ilo3{
margin-left: 62px;
margin-top: 50px;
color: red;
border: none;
}

.ilo4{
margin-left: 298px;
margin-top: 40px;
background-color: yellow;
width: 100px;
}

html

css

1 ответов

Привет, все блоки в строку, второй селект другого цвета и без границы. Если я правильно понял задание, то тогда вот так....

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
<title>Новостное агентство</title>
<link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
	<div id="black-bar">
		<div class="fixed-container">
			Самые <a href="#">свежие новости </a> в реальном времени
		<div id="daytime"> 13.05.2020 20:04 </div>
		</div>
	</div>
	<div>
		<div class="fixed-container">
			<div class="hui ilo2 ">
				<img id="logo" src="logo.png" alt="logo">
			</div>
			<div class="hui ilo3">
				<select>
					<option selected="selected">Москва</option>
					<option>Санкт-Петербург</option>
				</select>
			</div>
			<div class="hui ilo4"><img id="forecast" src="forecast1.png" alt="forecast icon">
				+22C
			</div>
			<div class="hui ilo">
				TEKCT
			</div>
		</div>
	</div>
	<div class="ilop">
		<select>
			<option selected="selected">Москва</option>
			<option>Санкт-Петербург</option>
		</select>
	</div>
</body>
</html>

CSS

html, body {
margin: 0;
padding: 0;
min-width: 1000px;
}
div {
	display: inline-block;
	border: solid 1px;
}
.ilop {
	/* padding: 10px;
	background: red; */
	border: 0px;
}
div.ilop > select {
	background: green;
}