Swiper Slider navigation arrows - texting cursor

Question

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

Answer 1

I was having the same problem and I thought that it was because of the swiperjs, but actually, in my case, I have accidentally enabled caret browsing mode in Chrome by clicking F7 button. Click F7 again to disable that mode. That option can be managed in settings in Accessibility page.