I realise the question must be difficult to understand, but I really don't know how to explain what I'm trying to achieve in a few words. In short, I'm trying to customise a tumblr theme with a search function that looks like a link when one hovers over it, but when one clicks on it works like an expandable search box. Basically one that looks like this: search box
Mine presently looks like this: my search box
Here's the code:
.nav {
font-family: 'Montserrat' 'Helvetica Neue' "Arial", serif;
text-transform: uppercase;
font-weight: 400;
padding: 16px 0;
margin-bottom: 80px;
font-size: 12px;
text-align: center;
border-bottom: 2px solid {color:Dividers};
}
.nav li {
margin:0 10px;
display: inline;
line-height: 1;
}
.nav a {
text-decoration: none;
color: {color:Nav}
}
.nav body {
background: #fff;
color: #666;
font: 90%/180% 'Montserrat' 'Helvetica Neue' "Arial", serif;
width: 800px;
max-width: 96%;
margin: 0 auto;
}
/*a {
color: #69C;
text-decoration: none;
}
a:hover {
color: #F60;
}*/
h1 {
font: 12px;
line-height: 110%;
color: #000;
}
p {
margin: 0 0 20px;
}
input {
outline: none;
}
input[type=search] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 12px;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
display: none;
}
input[type=search] {
background: #ededed url(https://static.tumblr.com/ftv85bp /MIXmud4tx/search-icon.png) no-repeat 9px center;
border: solid 1px #ccc;
padding: 9px 10px 9px 32px;
width: 55px;
-webkit-border-radius: 10em;
-moz-border-radius: 10em;
border-radius: 10em;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
input[type=search]:focus {
width: 130px;
background-color: #fff;
border-color: #66CC75;
-webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
-moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
box-shadow: 0 0 5px rgba(109,207,246,.5);
}
input:-moz-placeholder {
color: #999;
}
input::-webkit-input-placeholder {
color: #999;
}<div class="nav">
{block:HasPages}
{block:Pages}<li><a href="{URL}">{Label}</a></li>{block:Pages}
{/block:HasPages}
{block:AskEnabled}<li><a href="/ask">Ask</a></li>{/block:AskEnabled}
{block:SubmissionsEnabled}<li><a href="/submit">Submit</a></li>{/block:SubmissionsEnabled}
<li><a href="/archive">Archive</a></li>
<li><form style="display: inline-block" action='/search'class='search-form' id='nav-search' method='get'>
<input class='header-search-field' name='q' type='search' placeholder='Search'/></form>
</li>
</div>I know the code is not the right one for what I'm trying to achieve, but it was the best I could do with my limited knowledge of coding.
I should mention that the search function at the moment doesn't work particularly well (i.e. it doesn't return all the results that it should, just a few tagged elements), but I'm not sure where the problem lies with that.
You can edit your css file in order to achieve the effect you want.
In your case, the input[type=search] tag is the one that defines the appearance of your search box when it's not focused. In order to delete the border, you define the border:none property, otherwise it will default to the browser's value.
You may also not want the background property to make your searchbox gray with the magnifier icon.
The segment of your css file therefore changes to:
input[type=search] {
border: none;
padding: 9px 10px 9px 32px;
width: 55px;
...
}
Snippet:
.nav {
font-family: 'Montserrat' 'Helvetica Neue' "Arial", serif;
text-transform: uppercase;
font-weight: 400;
padding: 16px 0;
margin-bottom: 80px;
font-size: 12px;
text-align: center;
border-bottom: 2px solid {color:Dividers};
}
.nav li {
margin:0 10px;
display: inline;
line-height: 1;
}
.nav a {
text-decoration: none;
color: {color:Nav}
}
.nav body {
background: #fff;
color: #666;
font: 90%/180% 'Montserrat' 'Helvetica Neue' "Arial", serif;
width: 800px;
max-width: 96%;
margin: 0 auto;
}
/*a {
color: #69C;
text-decoration: none;
}
a:hover {
color: #F60;
}*/
h1 {
font: 12px;
line-height: 110%;
color: #000;
}
p {
margin: 0 0 20px;
}
input {
outline: none;
}
input[type=search] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 12px;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
display: none;
}
input[type=search] {
border: none;
padding: 9px 10px 9px 32px;
width: 55px;
-webkit-border-radius: 10em;
-moz-border-radius: 10em;
border-radius: 10em;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
input[type=search]:focus {
width: 130px;
background-color: #fff;
border-color: #66CC75;
-webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
-moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
box-shadow: 0 0 5px rgba(109,207,246,.5);
}
input:-moz-placeholder {
color: #999;
}
input::-webkit-input-placeholder {
color: #999;
}<div class="nav">
{block:HasPages}
{block:Pages}<li><a href="{URL}">{Label}</a></li>{block:Pages}
{/block:HasPages}
{block:AskEnabled}<li><a href="/ask">Ask</a></li>{/block:AskEnabled}
{block:SubmissionsEnabled}<li><a href="/submit">Submit</a></li>{/block:SubmissionsEnabled}
<li><a href="/archive">Archive</a></li>
<li><form style="display: inline-block" action='/search'class='search-form' id='nav-search' method='get'>
<input class='header-search-field' name='q' type='search' placeholder='Search'/></form>
</li>
</div>If you wish to edit the background color when the searchbox is clicked, you must add the property to the input[type=search]:focus tag.