Мой расширяемый контент не работает над IE

Question

Любые идеи, почему этот код не работает над IE? Я тестировал несколько версий, и насколько я могу сказать: элемент focus должен работать, но по какой-то причине, когда я нажимаю на него, ничего не происходит.

.collapse { 
 
\t text-align:left; 
 
} 
 

 
.collapse > * + *{ 
 
    display:none; 
 
    
 
} 
 
.collapse > *{ 
 
    cursor:pointer; 
 
    } 
 
    
 
.collapse:focus{ 
 
    outline:none; 
 
} 
 
.collapse:focus > * + *{ 
 
    display:block; 
 
} 
 

 

 
.accordian-gradient { 
 
\t 
 
\t /*GRADIENT*/ 
 
\t background: rgba(168,168,168,1); 
 
/* Old Browsers */background: -moz-linear-gradient(top, rgba(168,168,168,1) 0%, rgba(203,203,203,1) 52%, rgba(234,234,234,1) 100%); 
 
/* FF3.6+ */background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(168,168,168,1)), color-stop(52%, rgba(203,203,203,1)), color-stop(100%, rgba(234,234,234,1))); 
 
/* Chrome, Safari4+ */background: -webkit-linear-gradient(top, rgba(168,168,168,1) 0%, rgba(203,203,203,1) 52%, rgba(234,234,234,1) 100%); 
 
/* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top, rgba(168,168,168,1) 0%, rgba(203,203,203,1) 52%, rgba(234,234,234,1) 100%); 
 
/* Opera 11.10+ */background: -ms-linear-gradient(top, rgba(168,168,168,1) 0%, rgba(203,203,203,1) 52%, rgba(234,234,234,1) 100%); 
 
/* IE 10+ */background: linear-gradient(to bottom, rgba(168,168,168,1) 0%, rgba(203,203,203,1) 52%, rgba(234,234,234,1) 100%); 
 
/* W3C */filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a8a8a8', endColorstr='#eaeaea', GradientType=0); 
 
/* IE6-9 */ 
 
\t 
 
\t 
 
}

<div style="width:100%; max-width:750px; text-align:left;" class="collapse" tabindex="4"> 
 
    <div style="width:100%; max-width:750px; text-indent:10px; margin-bottom:10px; padding:5px 0px 5px 0px;" class="accordian-gradient">Question<div style="width:20%; float:right; vertical-align:middle; text-align:right; padding-right:5px;">+&nbsp;</div> </div> 
 
    <div style="width:100%; max-width:700px; cursor:default; padding-bottom:10px; margin: 0 auto;"> 
 
    <p>Answer goes here</p> 
 
    </div> 
 
    </div>

Есть ли что-то я могу добавить? Я очень ограничен тем, что я могу использовать, поскольку это довольно ненадежные внутренние таблицы стилей, а не javascript или jquery. Я должен сохранить как можно больше CSS-строки.

Благодаря

Answer 1

:focus Селектор допускается на элементы, которые принимают события клавиатуры или другие входы пользователей.

Попробуйте использовать тег <button>.

button:focus { 
    background-color: yellow; 
} 

<button>Expand me</button>

Это, кажется, работает в Edge.

Edit:

button { 
 
    width: 100%; 
 
    max-width: 750px; 
 
    background-color: Transparent; 
 
    background-repeat: no-repeat; 
 
    border: none; 
 
    cursor: pointer; 
 
    overflow: hidden; 
 
    outline: none; 
 
} 
 

 
p { 
 
    display: none; 
 
    background-color: aqua; 
 
    padding: 20px; 
 
} 
 

 
button:focus p { 
 
    display: block; 
 
} 
 

 
span { 
 
    width: 100%; 
 
    max-width: 750px; 
 
    text-align: left; 
 
} 
 

 
.gradient { 
 
    /*GRADIENT*/ 
 
    background: rgba(168, 168, 168, 1); 
 
    /* Old Browsers */ 
 
    background: -moz-linear-gradient(top, rgba(168, 168, 168, 1) 0%, rgba(203, 203, 203, 1) 52%, rgba(234, 234, 234, 1) 100%); 
 
    /* FF3.6+ */ 
 
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(168, 168, 168, 1)), color-stop(52%, rgba(203, 203, 203, 1)), color-stop(100%, rgba(234, 234, 234, 1))); 
 
    /* Chrome, Safari4+ */ 
 
    background: -webkit-linear-gradient(top, rgba(168, 168, 168, 1) 0%, rgba(203, 203, 203, 1) 52%, rgba(234, 234, 234, 1) 100%); 
 
    /* Chrome10+,Safari5.1+ */ 
 
    background: -o-linear-gradient(top, rgba(168, 168, 168, 1) 0%, rgba(203, 203, 203, 1) 52%, rgba(234, 234, 234, 1) 100%); 
 
    /* Opera 11.10+ */ 
 
    background: -ms-linear-gradient(top, rgba(168, 168, 168, 1) 0%, rgba(203, 203, 203, 1) 52%, rgba(234, 234, 234, 1) 100%); 
 
    /* IE 10+ */ 
 
    background: linear-gradient(to bottom, rgba(168, 168, 168, 1) 0%, rgba(203, 203, 203, 1) 52%, rgba(234, 234, 234, 1) 100%); 
 
    /* W3C */ 
 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#a8a8a8', endColorstr='#eaeaea', GradientType=0); 
 
    /* IE6-9 */ 
 
}

<button class="gradient"> 
 
    <span>Question</span> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla gravida urna lacus, id tempor nulla tristique dapibus. Nulla efficitur felis iaculis mi aliquet, vel maximus dolor molestie. Nullam efficitur, urna et pretium gravida, enim justo lacinia justo, eget placerat elit nisi id sem. Pellentesque consequat pulvinar turpis, quis euismod velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin nec mattis dui, eget dapibus neque. Aliquam erat volutpat. Integer a dolor sit amet velit auctor egestas. Proin nibh felis, egestas et porta non, tincidunt non nunc. Duis aliquam, enim vulputate porta maximus, mi nunc pharetra turpis, vel vestibulum ipsum risus sit amet purus. Curabitur id bibendum ligula. Aenean ut ipsum sem. Sed placerat auctor accumsan. Morbi mollis id sapien eget ultricies. Cras tristique velit massa, a tincidunt nibh molestie commodo. Maecenas volutpat sit amet massa eu pulvinar.</p> 
 
</button>