How do I remove input selection when using mobile?-CodePudding

I'm creating a website with this contact form that has a button using an input element

<li> <!-- this List has no style at all -->
  <input type="submit" value="Enviar">
</li>

The problem is when I click this button in mobile phones, at a glance, there's an selection that appears very quickly. The appearance is similar to the user-select, but I tried to remove as you can see in the css below.

Image of the issue: Link for the picture showing the issue

input[type="submit"] {
    -webkit-user-select: none;
    user-select: none;
    border-radius: 30px;
    transition: all .2s ease;
    cursor: pointer;
    background: var(--primary-color);
    color: #FFF;
    font-weight: bold;
    box-shadow: 0 5px 0px 3px hsl(201, 70%, 33%), inset 1.5px 1.5px 0 var(--primary-hl-color);
}

input[type="submit"]:active {
    -webkit-user-select: none;
    user-select: none;
    /* scale: 0.93; */
    /* translate: 0 5px; */
    /* box-shadow: 0 0 0px 3px hsl(201, 70%, 33%), inset 1.5px 1.5px 0 var(--primary-hl-color); */
}

Does anyone know how to help me with this issue?

CodePudding user response：

for styles varying on screen sizes like for phone, you can use @media query in your styles.

example:

@media only screen and (max-width: 600px) {
  .inputButtonStyles{
    display: none;
    /* Extra small devices (phones, 600px and down) */
    
  }
}

your input element would look like:

<li> <!-- this List has no style at all -->
  <input type="submit" value="Enviar" >
</li>

CodePudding user response：

Someone answered me through email.

This weird selection comes from the cursor property in CSS when you're dealing with touch screen. Thus, I changed the value to none when in devices less than 768px.

@media screen and (max-width: 768px) {

    .contact-form input[type="submit"] {
        cursor: none;
    }