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 回答