Como hago para que cuando seleccione el input se quede el borde azul y no solo cuando hago el hover?

Si no funciona prueba con este

	.main-input .main-input-container input:focus{
		border-color: red;
		background: red;
		// Aquí pon el código que gustes
	}

Prueba con esta instrucción css, si no funciona tal vez sea problema de especificidad y me puedes pasar el codigo completo, pero debería funcionar :)

		.main-input-container input:focus{
			border-color: red;
			background: red;
			// Aquí pon el código que gustes
		}

Es a la caja main-input-container

  <section class="main-input">
      <div class="main-input-container">
        <input type="search" />
        <div class="hide-arrow">
          <label for="search-language">ES</label>
          <select name="languages-options" id="search-language">			 
          </select>
        </div>
      </div>
      <div class="search-icon-container">
        <span class="search-icon"></span>
      </div>
    </section>

Si quieres puedes pasarme el código html de el elemento que quieres aplicarle el efecto

No me funciona

Lo probare muchas gracias

Prueba usando la pseudoclase focus para tu input

#example-form:focus{
	background-color: red;
}