Я не могу придумать, как сделать это с помощью CSS, но вы можете использовать javascript, чтобы подключиться к проверке формы браузера и проверить, требуется ли поле.Если ввод требуется и не был завершен, вы можете открыть родительский элемент сведений с помощью .open = true;
, что позволит увидеть требуемое сообщение.
var detailInputs = document.querySelectorAll('form details input');
[].forEach.call(detailInputs, function(detailInputs) {
detailInputs.addEventListener('invalid',function(e){
detailInputs.parentNode.open = true;
});
});
<form>
<details>
<input type="checkbox" required="required">
</details>
<input type="submit">
</form>