Suchleiste wie Google in HTML und CSS

Ich lerne HTML, CSS und ich habe Probleme mit Suchleiste wie Google. Können Sie mir einen Rat geben, was mache ich falsch, besonders mit der Größe? Thanks :)Suchleiste wie Google in HTML und CSS

<!DOCTYPE html> 
 
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns:th="http://www.thymeleaf.org"> 
 

 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
</link> 
 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 
</link> 
 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<link rel="shortcut icon" type="image/x-icon" href="https://image.freepik.com/photos-libre/courbe-de-vapeur-de-la-fumee-d&-39;onde_19-123974.jpg" /> 
 
<style> 
 
    .container { 
 
    width: 1000px; 
 
    margin-top: 100px; 
 
    text-align: center; 
 
    } 
 
    h2 { 
 
    font-family: "Trebuchet MS", Helvetica, sans-serif; 
 
    size: 150px; 
 
    fill: #294F6D; 
 
    } 
 
    div { 
 
    width: 500px; 
 
    height: 50px; 
 
    } 
 
    h1 { 
 
    text-align: center; 
 
    fill: 02111 D; 
 
    } 
 
    .search input[type="search"] { 
 
    width: 400px; 
 
    height: 50px; 
 
    } 
 
</style> 
 
<body> 
 
    <div class="container" 
 
    <form action="/worldoffragrance"> 
 
     <input name="search" /> 
 
     <input type="submit" value="GO" /> 
 
    </form> 
 
    </div> 
 
</body> 
 
</html>

Vielen Dank für Ihre Anregungen :)

Quelle

2016-08-22 kajasha

können Sie Ihren Code einschließlich html hinzufügen? – fernando

Sie müssen jedem Element Stile hinzufügen, um die Sucheingabe- und Suchschaltfläche zu verwenden, wenn Sie sie genau wie Google benötigen. –

Try this, Das könnte Sie in irgendeiner Weise helfen.

Aktualisiert

input{ 
 
    border: none; 
 
    padding: 10px; 
 
    margin: 10px; 
 
    height: 20px; 
 
    width: 500px; 
 
    border:1px solid #eaeaea; 
 
    outline:none; 
 
} 
 
input:hover{ 
 
    border-color: #a0a0a0 #b9b9b9 #b9b9b9 #b9b9b9; 
 
} 
 
input:focus{ 
 
    border-color:#4d90fe; 
 
} 
 

 
input[type="submit"] { 
 
    border-radius: 2px; 
 
    background: #f2f2f2; 
 
    border: 1px solid #f2f2f2; 
 
    color: #757575; 
 
    cursor: default; 
 
    font-size: 14px; 
 
    font-weight: bold; 
 
    width: 100px; 
 
    padding: 0 16px; 
 
    height:36px; 
 
} 
 
input[type="submit"]:hover { 
 
    box-shadow: 0 1px 1px rgba(0,0,0,0.1); 
 
    background: #f8f8f8; 
 
    border: 1px solid #c6c6c6; 
 
    box-shadow: 0 1px 1px rgba(0,0,0,0.1); 
 
    color: #222; 
 
}

<div class="main"> 
 
<input type="text" /> 
 
<input type="submit" value="Go"> 
 
</div>

Quelle

2016-08-22 11:00:48

Sieht viel besser aus! Vielen Dank :) – kajasha

Suchleiste wie Google in HTML und CSS

Antwort

Verwandte Themen