CODEWITHSUNDEEP
htmlcss
Sangrai
Sangrai

Reputation: 687

Make disable input type text on mobile and editable on desktop through CSS?

How can I make the input type text to disable through CSS on mobile?

Here is my code:

<input id="example" class="ui-timepicker-input" placeholder="" type="text">

Since typepad is opening while add select the time on mobile. I want not to open typepad on mobile for slecting time and date picker.

Upvotes: 2

Views: 1561

Answers (3)

CodeZombie
CodeZombie

Reputation: 2087

CSS cannot disable the input, you can however turn off display or visibility.

CSS

@media screen and (max-width:320px){
.disable{
    display: none !important;
    visibility: hidden !important; //optional
}
}

HTML

<input id="example" class="ui-timepicker-input disable" placeholder="" type="text">

Upvotes: -1

bhansa
bhansa

Reputation: 7514

You can mimic the effect using pointer-events: none; put these styles into media query for mobile.

#example {
  background: #ccc;
  outline: none;
  border: 0;
  border: 1px solid #777;
  pointer-events: none;
}
<input id="example" class="ui-timepicker-input" placeholder="" type="text" tabindex="-1">

Upvotes: 3

Farkas Imre
Farkas Imre

Reputation: 123

You can hide it - if no need or duplicate - one for desktop. one for mobile each set in attributes how you need

Upvotes: 1

Related Questions