Как разместить блоки текста над input или на нем?

Question

[weranda]

Приветствую

Возможно ли что-то сделать с этим HTML-кодом с помощью стилей:

<form>
    <div>Нравится</div>
    <div>+15</div>
    <input type="submit">
</form>

Чтобы окончательный вид был таким:
И он работал?

Я имею ввиду наложение поверх input'a двух дивов таким образом, чтобы по нажатию на них/кнопку происходило действие. Сейчас div'ы перекрывают кнопку и ее невозможно нажать. Разумеется, можно заюзать JS, но есть ли вариант оформления всего этого дела без него?

Answer 1

[Александр Талалаев]

Разу у вас все сверстано, то разумнее всего задать дивам что перекрывают кнопку свойство pointer-events в значение none.
pointer-events: none;
Таким образом бразуер будет игнорировать события мыши для этих элементов.

Comments

[weranda]

Спасибо.

Answer 2

[Александр Алексеев]

<form>
    <label>
        <div>Нравится</div>
        <div>+15</div>
        <input type="submit">
    </label>
</form>