I have problem which is frustrating me. I have set up Swiper slider on my html - works fine no prob, but problem is with arrows - i dont know why but when arrow is clicked then texting cursor appears and i think it shouldnt be that way. Does someone has faced similar problem and how solved it? thanks

Image 👇

css for buttons - `.main-slider .swiper-button-prev {

position: absolute;

background-repeat: no-repeat;

height: 50px;
width: 50px;
border-radius: 50%;
top: 30px;

}

.main-slider .swiper-button-next {

position: absolute;
background-repeat: no-repeat;
background-color: #40A2D5;
height: 50px;
width: 50px;
border-radius: 50%;
top: 30px;

}`

`.arrow-container {

min-height: 66px;
max-width: 120px;
text-align: center;
margin: 0 auto;
border-radius: 65px;
position: relative;
margin-top: 80px;
margin-bottom: 65px;

}`

and the same problem is with HTML forms - I can click outside form and this frustrating text enter cursor appears - probably it shows div but is it suppose to do that? Image 👇 enter image description here