検索入力に入力されたテキストが表示されないのはなぜですか？

Question

これはコードです：http://collabedit.com/a2mjd

私はさまざまな方法を試しましたが、問題の解決には至りませんでした。検索入力に入力されたテキストが表示されないのはなぜですか？

Answer 1

• あなたのinput[type="text"]には、目的の色（より深いセレクタで上書きされます）に影響します。 !importantを使用しないようにするには、.navbar input[type="text"]などのセレクタに影響するようにオーバーライドできます。

参照スニペット：

.navbar-brand { 
 
    font-family: 'Indie Flower', cursive; 
 
    font-size: 32px; 
 
} 
 
body, 
 
td, 
 
th { 
 
    color: #F31215; 
 
    background-color: white; 
 
    color: #94172B; 
 
} 
 
.navbar input[type="text"] { 
 
    width: 130px; 
 
    -webkit-transition: width 0.4s ease-in-out; 
 
    transition: width 0.4s ease-in-out; 
 
    color: black; 
 
} 
 
/* When the input field gets focus, change its width to 100% */ 
 

 
.navbar input[type="text"]:focus { 
 
    /*width: 100%;*/ 
 
    color: black; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<nav class="navbar navbar-inverse"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="#">Motokauppa</a> 
 
    </div> 
 
    <div class="collapse navbar-collapse" id="myNavbar"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Info</a> 
 
     </li> 
 
     <li class="dropdown"> 
 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Prätkät <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Husqvarna 701 supermoto</a> 
 
      </li> 
 
      <li><a href="#">KTM Supermoto 450</a> 
 
      </li> 
 
      <li><a href="#">Ducati Panigale</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">Yhteystiedot</a> 
 
     </li> 
 
     <li> 
 
      <a href="#"> 
 
      <button type="button" class="btn btn-info"> 
 
       <span class="glyphicon glyphicon-search"></span> 
 
       <input type="text" name="search" placeholder="Etsi"> 
 
      </button> 
 
      </a> 
 
     </li> 
 
     <li> 
 
      <a href="#"> 
 
      <p> 
 
      </p> 
 
      </a> 
 
     </li> 
 
     </ul> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#"><span class="glyphicon glyphicon-home"></span></a> 
 
     </li> 
 
     <li> 
 
      <a href="#"> 
 
      <p><span class="glyphicon glyphicon-envelope"></span> 
 
      </p> 
 
      </a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav> 
 
<!-- haitarimalli jqueryllä --> 
 
<div id="Accordion1"> 
 
    <h3><a href="#">Section 1</a></h3> 
 
    <div> 
 
    <p>Content 1</p> 
 
    </div> 
 
    <h3><a href="#">Section 2</a></h3> 
 
    <div> 
 
    <p>Content 2</p> 
 
    </div> 
 
    <h3><a href="#">Section 3</a></h3> 
 
    <div> 
 
    <p>Content 3</p> 
 
    </div> 
 
</div> 
 
<!-- tab queryllä --> 
 

 
<div id="tabs"> 
 
    <ul> 
 
    <li><a href="#tabs-1">Tab 1</a> 
 
    </li> 
 
    <li><a href="#tabs-2">Tab 2</a> 
 
    </li> 
 
    <li><a href="#tabs-3">Tab 3</a> 
 
    </li> 
 
    </ul> 
 
    <div id="tabs-1"> 
 
    <p>Content 1</p> 
 
    </div> 
 
    <div id="tabs-2"> 
 
    <p>Content 2</p> 
 
    </div> 
 
    <div id="tabs-3"> 
 
    <p>Content 3</p> 
 
    </div> 
 
</div> 
 

 

 
<div class="container"> 
 
    <h3>Collapsible Navbar</h3> 
 
    <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).</p> 
 
    <p>Only when the button is clicked, the navigation bar will be displayed.</p> 
 
    <br> 
 
    <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
 
    <!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
     <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
 
     <li data-target="#myCarousel" data-slide-to="1"></li> 
 
     <li data-target="#myCarousel" data-slide-to="2"></li> 
 
     <li data-target="#myCarousel" data-slide-to="3"></li> 
 
    </ol> 
 

 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner" role="listbox"> 
 
     <div class="item active"> 
 
     <img src="http://images.mcn.bauercdn.com/PageFiles/555744/701sm-1.jpg" alt="701sm-1" class="center-block" /> 
 
     <div class="carousel-caption"> 
 
      <h3>Husqvarna 701 Supermoto </h3> 
 
      <p>9 980€</p> 
 
     </div> 
 
     </div> 
 
     <div class="item"> 
 
     <img src="https://s-media-cache-ak0.pinimg.com/originals/26/27/09/262709f7281b96a074042f7f891e93c4.jpg" alt="KTM450" class="center-block" /> 
 
     <div class="carousel-caption"> 
 
      <h3>KTM Supermoto 450<br> 
 
     </h3> 
 
      <p>10 390€</p> 
 
     </div> 
 
     </div> 
 
     <div class="item"> 
 
     <img src="http://images.mcn.bauercdn.com/PageFiles/578783/1000x750/1299Anniversario_02.jpg" alt="Ducati-Panigale" class="center-block" /> 
 
     <div class="carousel-caption"> 
 
      <h3>Ducati Panigale</h3> 
 
      <p>30 490€</p> 
 
     </div> 
 
     </div> 
 
     <div class="item"> 
 
     <img src="http://www.motoshop-vohl.de/wp-content/uploads/2012/12/IMG_6517.jpg" alt="motokauppa" class="center-block" /> 
 
     <div class="carousel-caption"> 
 
      <h3>Kauppamme</h3> 
 
     </div> 
 
     <!-- Left and right controls --> 
 
     <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
 
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
      <span class="sr-only">Previous</span> 
 
     </a> 
 
     <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
 
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
      <span class="sr-only">Next</span> 
 
     </a> 
 
     </div> 
 
     <div class="container"> 
 
     <div class="jumbotron"> 
 
      <h1>Motokauppa Pasilassa</h1> 
 
      <p>Kauppamme on perustettu vuonna 2017. Kaupasta löydät monia eri tunnettuja merkkejä, tutustu valikoimaamme Tuotteet-osiosta.</p> 
 
     </div> 
 
     </div>