Giriş stili, neden geçersiz blok görüntülendiğinde gösteriliyor

Question

Yer tutucu metninin bir kısmını kalın olarak göstermek istediğim için giriş kutumu stillemeye çalışıyorum.

: /: Geçersiz /: geçersiz bazı tuhaf nedenlerle engellemeyi denedim: Hiçbir durumda blok görüntülenmiyor.

Neyi yanlış yapıyorum?

İşte benim kod

/* Search section */ 
 

 
.search_container { 
 
    padding: 39px 27px; 
 
} 
 
.search_transparant_border { 
 
    height: 90px; 
 
} 
 
.big_search_area { 
 
    background: rgba(129, 163, 195, 0.7); 
 
    padding: 15px; 
 
    margin: 0 auto; 
 
    width: 85%; 
 
} 
 
.big_search { 
 
    background: url(../images/green_search_icon.png); 
 
    width: 27px; 
 
    height: 26px; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    margin: 12px; 
 
    border: none; 
 
    cursor: pointer; 
 
} 
 
.big_input_search { 
 
    border: none; 
 
    border-radius: 5px; 
 
    font-family: 'Open Sans', sans-serif; 
 
    font-weight: 100; 
 
    width: 100%; 
 
    color: #949494; 
 
    font-size: 22px; 
 
    padding: 10px 35px 10px 10px; 
 
    box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    -ms-box-sizing: border-box; 
 
    -o-box-sizing: border-box; 
 
    -webkit-appearance: none; 
 
} 
 
.big_search_area form p { 
 
    position: absolute; 
 
    top: 18px; 
 
    left: 15px; 
 
} 
 
.big_search_area form p strong { 
 
    color: #576877; 
 
} 
 
.big_search_area p { 
 
    font-size: 20px; 
 
    right: 60px; 
 
    top: 17px; 
 
} 
 
.big_search_area form input:invalid + p { 
 
    display: block; 
 
} 
 
.big_search_area form input:invalid { 
 
    outline: none; 
 
    box-shadow: none; 
 
} 
 
.big_search_area form input:valid + p { 
 
    display: none; 
 
}

<!-- Search section --> 
 
<div class="search_container"> 
 
    <div class="search_transparant_border"> 
 
    <div class="big_search_area"> 
 
     <div style="position:relative;"> 
 
     <form action="/search/" method="get" style="position: relative"> 
 
      <input type="search" value="" class="big_input_search" name="query" required /> 
 
      <input class=big_search type=submit value="" /> 
 
      <p>{% trans "Search products e.g." %} <strong>ipod</strong> 
 
      </p> 
 
     </form> 
 

 
     </div> 
 
    </div>

sizin css bundan sonraki kısmında

Answer 1

, sen form input kullanıyor. Formda iki giriş olduğundan = input + psubmit girişi için kullanılabilir ancak bunu istemezsiniz.

<input type="search" value="" class="big_input_search" name="query" required /> 
<p>{% trans "Search products e.g." %} <strong>ipod</strong> 
<input class=big_search type=submit value="" /> 

Answer 2

Sen olarak, sizin p etiketi seçmek için çalışıyorum ama bir adjacent sibling selector kullandığınız şöyledir:

.big_search_area form input:invalid + p { 
    display: block; 
} 
.big_search_area form input:invalid { 
    outline: none; 
    box-shadow: none; 
} 
.big_search_area form input:valid + p { 
    display: none; 
} 

Yani html kullanarak bir çözüm/css sadece submit girişi yukarıdaki <p> </p> taşımak olacaktır p, doğrulamakta olduğunuz input bitişik bir kardeşi değildir ( submit input ürününüzün bitişiğindedir, asla seçilemez.

p'u seçmek için, bir general sibling selector kullanın. Ayrıca, CSS'nizi basitleştirmek ve yoldaki olası sorunları önlemek için, seçicinize textinput verdiğiniz sınıf adını kullanmanız gerekir. p bir blok düzeyi unsurdur olarak

Ve son olarak, bu kadar block onun display özelliğini gereksiz olduğunu belirleyen :invalid seçici gerekmez.

bu iki CSS kurallarını değiştirmek, Özetle:

.big_search_area form input:invalid + p { 
    display: block; 
} 
.big_search_area form input:valid + p { 
    display: none; 
} 

bu biriyle:

.big_input_search:invalid~p{ 
    display:none; 
}