0

代码

<select name="server" id="server" class="nofocus">
   <option value="X">X</option>
     <option value="XX">XXE</option>
     <option value="XXX">XXX</option>
     </select>

CSS 代码

#server { 
border: solid 1px #eeeeee;
  padding: .2em .25em .15em;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
    }

#server:focus { background: rgba(0, 34, 255, 0.2);
                transition-delay:0.5s;
 }

.nofocus:focus { color:#FFF00; }

所以我想要做的是延迟一些样式“开始”，一旦元素聚焦，一些样式就开始了。它只显示#server 和#server:focus 代码。

4

2 回答 2

1

您可以使用过渡速记来指定以不同方式过渡的样式。

#server {
transition: height 1s 1s, opacity 1s;
}

当给定两个值时，第一个值是延迟，第二个是持续时间

更多信息在这里： https ://developer.mozilla.org/en-US/docs/Web/CSS/transition

于 2013-10-03T16:32:58.697 回答
1

您应该指定要应用过渡的属性，因此其他属性（如color）不受影响。

#server:focus { 
    background: rgba(0, 34, 255, 0.2);
    transition:background;
    transition-delay:0.5s;
}

此外，您指定的颜色 ( #FFF00) 不正确（只有 5 个十六进制数字而不是 3 或 6）

演示在http://jsfiddle.net/yLSXc/1/

于 2013-10-03T16:40:43.163 回答