textbox style when selected Html/ModX

Question

I want to create an style for my search-box. Its the search-box from THIS site. I know that :active sort of does the trick but the effect just lasts for a split second. I am currently using modX so my code is currently swarming with modX terms but ill post it anyway.

<form class="sisea-search-form" action="[[~[[+landing:default=`[[*id]]`]]]]" method="[[+method:default=`get`]]">
  <fieldset>
    <label for="search"> Zoeken naar:</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 last part is modX but should not be necessary for my question. Cheers, Marco.

EDIT

I want a combination of both the active and focus selector. so i guess you could say an extended active . or you could say a focus selector which decays after a few seconds.

Karl-André Gagnon Karl-André Gagnon · Accepted Answer · 2013-05-03T12:25:46

I did a little trick for ya.

On :active, keep your css, but add a :focus class with those styles :

input:focus{
    border-width:5px;
    border-style:solid;
    border-color:transparent;
    -webkit-transition : border-color 0.5s
    -moz-transition : border-color 0.5s
    -o-transition : border-color 0.5s
    transition : border-color 0.5s
}

I did a fiddle, you just have to adsjust value to get what you want : http://jsfiddle.net/kDqhP/

textbox style when selected Html/ModX

1 Answers