CSS转换错误

2012-08-22 47 views 1 likes

我遇到了一些CSS问题。我编写了一个简单的文本框，当它被点击时，一个div下降，但它似乎没有工作。如果有人能帮助我，我会很棒。CSS转换错误

CSS：

input { 
    top:18px; 
    left:20px; 
    width:1230px; 
    padding:4px; 
    border:1px dashed #eeeeee; 
    font:16px arial; 
    font-weight:bold; 
    color:#d8d8d8; 
} 

input:focus { 
    height:200px; 
} 

div { 
    overflow:hidden; 
    padding:0; 
    margin:0; 
    height:0; 
    width:1230px; 
    border:1px dashed #eeeeee; 
    background-color:transparent; 
    transition:height.5s; 
    -moz-transition:height 0.5s; 
    -o-transition:height 0.5s; 
    -webkit-transition:height 0.5s; 
} 

body { 
    background-image:url('pic.bmp'); 
    background-repeat:no-repeat; 
}

来源

2012-08-22 James

必须有JavaScript的参与，如果点击发生一些动作。这将有助于查看JavaScript/HTML。 – mash

@Mash，不，我正在使用CSS转换。 – James

@Mash为什么必须涉及JavaScript？我相信他是指：焦点伪选择器。 – Greg

回答

的div有overflow: hidden财产，这将导致任何内部元素的高度要在div的高度渲染忽略。

来源

2012-08-22 16:54:59 Greg

我猜你需要改变input:focus到input:focus div（如果DIV是在输入元素），或类似的东西input:focus + div（如果DIV是输入后），但没有看到您的标记，很难说。

来源

2012-08-22 17:00:42

您必须使用input:focus + div来选择您的部门。

这里是你想要的纯CSS版本：jsFiddle

来源

2012-08-22 17:28:36 ygssoni

CSS转换错误

回答

相关问题