Владимир Коротенко

label:has(~ input:disabled) {
  color: red;  
}

https://techrocks.ru/2022/01/25/custom-mouse-curso...

Делаете кастомный курсор и редактируете курсор так что бы клик был на этом месте.

Реальные и объективные доводы вы получите при А - Б тестировании.
Причем не тупом через силениум, а на основе профиля посещаемости сайта и типичных маршрутов.

Попробуйте это

https://matemarschalko.medium.com/interactive-imag...

.DocSearch-Reset{
display: none;
}

поймите главное. UI фреймворки позволяют вам получить кучу всего из коробки и хорошо настраиваются.
У них есть поддержка как официальная так и кучи кодеров.
Фигача свой css вы встаете на сложный путь поддержки кучи кода, если вы Яндекс или Сбер это оправдано, но вот если вы компания до 50 человек или делаете разные проекты, то смысла нет

Как вариант

let container = document.createElement("div");
let p = document.createElement("p");
container.appendChild(p);
let btn = document.createElement("button");
btn.innerHTML ='hhh'
btn.onclick = ()=>{console.log('hi')}
p.after(btn);

svg

второй вариант магия css
что то типа трансформа и фильтров

Поиск потерянных фотоаппаратов и другой техники с серийными номерами.
из exif вычитывается серийный номер и вы можете на карте обозначить место потери.
Кроме этого есть еще 2 статуса на хранении, и найден.
Платный функционал позволяет заявить о находке и связаться с нашедшим.
Кроме этого есть функция для ломбардов проверки на ворованность девайса и функции для полиции посмотреть где больше всего воруют

Это svg + js ищите есть уроки

средствами html https://www.w3schools.com/tags/att_select_multiple.asp
если нужно что то более навороченное уточняйте

По моему работает

https://www.google.com/search?q=preview+image+befo...

смотрите https://tailwindui.com/documentation#react-install...

Видно что код более многословен в отличии от React UI, и вам придется все поведение описывать самому