CODEWITHSUNDEEP
cssjquery-mobile
user3383415
user3383415

Reputation: 435

remove borders of input jquery mobile

How can I quit the borders of a input in JQuery Mobile?

enter image description here

This is my code:

<div class="ui-block-a">
 <label for="textinput_nick" class="ui-hidden-accessible" data-t="form_nick"></label>
 <input type="text" name="nick" id="textinput_nick" placeholder="form_nick" value="" data-mini="true" maxlength="80">
</div>

Upvotes: 1

Views: 7687

Answers (2)

Gunnar
Gunnar

Reputation: 413

Note: As of https://github.com/jquery/jquery-mobile/issues/7781 the wrapper-class will become deprecated.

At the moment I'm using JS like

$("input").closest(".ui-input-text").addClass("no-glow");

Upvotes: 0

Omar
Omar

Reputation: 31732

As of jQuery Mobile 1.4, you can apply custom CSS to input without any JS intervention. Create a custom class and add it to input by using data-wrapper-class attribute.

Custom CSS

.ui-input-text.ui-custom {
   border: none;
   box-shadow: none;
}

Add it to input

<input type="text" data-wrapper-class="ui-custom" />

Demo

In jQuery Mobile 1.3 & earlier, input is invisible and replaced with a div .ui-input-text that holds all styles.

To remove border, you need to remove it from .ui-input-text not input itself as it's invisible.

.ui-input-text {
  border: none;
}

To remove inner shadow, you have to do it in JS. Wrap your code in pagecreate to take effect once per page.

$(document).on("pagecreate", function () {
  $(".ui-input-text").removeClass("ui-shadow-inset");
});

Demo

Upvotes: 10

Related Questions