0

検索ボックスのスタイルを作成したい。このサイトの検索ボックスです。私は :active がトリックを行うことを知っていますが、効果はほんの一瞬しか続きません。私は現在 modX を使用しているため、コードは現在 modX 用語で群がっていますが、とにかく投稿できません。

<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>]]

最後の部分は modX ですが、私の質問には必要ありません。乾杯、マルコ。

編集

アクティブ セレクターとフォーカス セレクターの両方の組み合わせが必要です。だから私はあなたが拡張アクティブと言うことができると思います。または、数秒後に減衰するフォーカスセレクターと言えます。

4

1 に答える 1

2

私はあなたのためにちょっとしたトリックをしました。

:active では、css を保持しますが、これらのスタイルで :focus クラスを追加します。

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
}

私はフィドルをしました。あなたが望むものを得るには値を調整する必要があります: http://jsfiddle.net/kDqhP/

于 2013-05-03T12:25:46.850 に答える