Vadim Bogomazov

Секреты JavaScript ниндзя.
Выразительный JavaScript.
Как устроен JavaScript.

Через псевдоэлементы before, after.

$.fn.isInViewport = function() {
    var elementTop = $(this).offset().top;
    var elementBottom = elementTop + $(this).outerHeight();
    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();
    return elementBottom > viewportTop && elementTop < viewportBottom;
};

Или: Intersection Observer API

Не проще эту функцию в скролле вытащить отдельно и повесить ее на скролл и document.ready?

Вероятно только так:

input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
}

Но в целом, как тебе уже ответили, лучше скрой его и стилизуй через другой элемент.

Из книг по css нормальную читал только эту. Остальное лучше черпать из статей и доков, потому что книга по css - это бесполезное перечисление свойств в справочном виде, их быстрее посмотреть в интернете.