Remove Borders of Input Jquery Mobile

remove borders of input jquery mobile

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

How to add remove border from text field

Assuming that you want the input to look different only when it contains a value, I'd suggest this:

$(document).ready(
    function(){
        $('#textInput').blur(
            function(){
                if ($(this).val()) {
                    $(this).addClass('bordered');   
                }
            });
        $('#textInput').focus(
            function(){
                $(this).removeClass('bordered');  
            });
    });

And define the bordered css class in the css file (rather than adding/removing css properties in jQuery with css()), for example:

.bordered {
    border: 1px solid #f00;
}

Demo at JS Fiddle.

How to remove border from jquery mobile radio buttons

Here are some styles you can add to the bottom to get pretty close to what you're looking for.(built ontop of twsansbury's answer)

/* remove rounded corners */
.ui-btn-corner-all {
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
}

/* remove border between each item */
.ui-btn-inner{
  border: 0;
}

/* remove margin between items */
fieldset .ui-radio {
  margin: 0;
}

/* change background, remove other border, unbold text */
.ui-btn-up-a, .ui-btn-hover-a, .ui-btn-down-a {
  background: #4f83bc;
  background-image: none;
  border: 0;
  font-weight: normal;
}

/* change color of radio background */
.ui-checkbox-on .ui-icon, .ui-radio-on .ui-icon {
  background-color: #456;
}

Result:

http://jsfiddle.net/bJHrM/7/

jQuery mobile creates a blue border around my screen, how to remove?

A quick fix is to remove this outline through css

.ui-page-active { outline: none; }

Done!

jQuery Mobile border on select text input

You must edit JQM css file. Depending on a chosen theme (a - f, or more if you used theme generator find and edit border outline around selected items.

If remembered it correctly there is only one property per theme.

Got it, search css file and look for: .ui-btn-active, comment background and background-image, or change it to any color you prefer.

Also regarding your last posts you can find a lot of good stuff here. It will show you how to do a lot of customizations to JQM css.

Remove margin around input in jQuery Mobile

DEMO

You may write new CSS for input with parent containers class name so that it will take higher priority

HTML

<div class="wrap">
<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
    <input id="myinput" />
</div>
</div>  

CSS

.wrap .ui-input-text input{
    border:1px solid red; /*desired style*/
    margin-top:0;
}

How to remove the blue halo glow from jQuery Mobile input elements that receive focus

Use the below CSS to override/remove the shadow.

Demo

.ui-focus {
 -moz-box-shadow: none !important;
 -webkit-box-shadow: none !important;
 box-shadow: none !important;
}

This will remove shadow from all input elements. However, if you want, you can add it as a class to specific elements/input types. Assuming the class name is noshadow.

Update

I made a demo to show you exactly how to remove blue halo glow from different types of inputs. All input types are wrapped by a DIV which accommodates major classes. Thus, any custom class should be added to that div using .closest('div').

The below code removes blue shadow / adds .noshadow to input type=email only, leaving other inputs untouched.

$(document).on('focus', 'input', function () {
 if ($(this).hasClass('ui-input-text') && $(this).attr('type') == 'number') {
  $(this).closest('div').addClass('noshadow');
 }
});

I used ui-input-text to identify the input as all inputs have that class. However, it is different for input type=search as it has an additional class .ui-input-search and data-type=search unlike other inputs. So it requires different procedure to add custom class to it, this way.

$(document).on('focus', 'input', function () {
 if ($(this).closest('div').hasClass('ui-input-search')) { // or $(this).attr('data-type') == 'search'
  $(this).closest('div').addClass('noshadow');
 }
});

Cannot remove the styling of the input field in jquery mobile

Add data-role="none" attribute to elements you don't want to be styled by JQM.

<input type=text data-role=none />

---

Related Topics