I am looking to enhance the style of my search-box, which is similar to the one on THIS website. While I have tried using :active, the effect only lasts for a brief moment. Currently, my code is heavily influenced by modX terms, but I will still share it here.
<form class="sisea-search-form" action="[[~[[+landing:default=`[[*id]]`]]]]" method="[[+method:default=`get`]]">
<fieldset>
<label for="search"> Search:</label>
<input type="text" name="[[+searchIndex]]" id="[[+searchIndex]]" value="[[+searchValue]]" />
<input type="hidden" name="id" value="[[+landing:default=[[*id]]]]" />
<input type="submit" value="[[%sisea.search? &namespace=`sisea` &topic=`default`]]" />
</fieldset>
</form>
.sisea-search-form{
font-family: arial;
font-size: 12px;
color: #555555;
margin-top:10px;
}
.sisea-search-form label{
margin-left: 15px;
cursor: default;
}
#search:active{
border-width:5px;
border-style:solid;
border-color:black;
}
.sisea-search-form input[type="text"]{
width:130px;
}
.sisea-search-form input[type="submit"]{
width:55px;
}
<h3>Search</h3>
[[!SimpleSearchForm? &tpl=`simpleSearchTpl` &landing=`58` ]]
[[-<form role="search" method="get" id="searchform" action="#">
<div class="zoekVeld">
<input type="submit" class="searchButton" value="Zoeken">
</div>
</form>]]
The modX part at the end may not be relevant to my query. Cheers, Marco.
EDIT
I am interested in combining the active and focus selectors for an extended effect or a focus selector that fades after a few seconds.