[CSS] nie działa css dla parenta Opcje

[shpaque]

Witam, od razu dodam ze konsola nic nie zwraca- zawsze dzialalo - tutaj nie. Chodzi o to ze po nacisnieciu inputa (:focus) nie zmienia mi ustawien css formularza

[HTML] pobierz, plaintext 
<style>
.search-home
{
	position: relative;
	min-width: 300px;
	max-width: 92%;
	height: 60px;
	padding: 12px;
	margin: 13px 0 20px 0;
	border: solid 3px rgba(0, 0, 0, 0.15);
	border-radius: 50px;
	background: rgba(255, 255, 255, 0.25);
	color: black;
	overflow: hidden;
}
 
.inputSearchHome
{
	display: inline-block;
	float: left;
	width: 85%;
	padding: 5px 0 0 10px;
	font-family: "Open Sans";
	font-size: 15px;
	text-align: left;
	border: none;
	outline: none;
	background: transparent;
	color: #464646;
}
 
.inputSearchHome:focus .search-home
{
	background: rgba(255, 255, 255, 0.5);
	border: solid 3px red;
}
 
.submitSearchHome
{
	display: inline-block;
	float: right;
	margin: 0 10px 0 0;
	width: 10%;
	text-align: right;
	background: transparent;
	border: none;
	outline: none;
	color: rgba(255, 255, 255, 0.5);
}
</style>
 
<form action="./search.php" method="get" class="search-home" name="widget-search-home">
	<input type="text" class="inputSearchHome" name="s" placeholder="Wyszukaj szkolenie" />
	<button type="submit" class="submitSearchHome"><span class="fa fa-search icon-md"></span></button>
</form>
[HTML] pobierz, plaintext 

Ten post edytował shpaque 29.06.2018, 13:27:15

[shpaque]

Zrobiłem szybki jsfiddle - jak dam ".parent:hover .child:hover" to zmienia background i to parenta chyba bo na calej szerokosci..?

https://jsfiddle.net/gmaLf4k7/3/