why the button is not taking the style?

Question

Hi I have the code where i have two button in the div using jquery mobile but while put some style on the button its not taking the Style.Then how to achieve that using jquery mobile?

.ui-block-b .ui-btn .ui-input-btn .ui-corner-all .ui-shadow {
    background:yellow;
}

<div data-role="ui-grid-a">
  
  
<div>

Your CSS doesn't correspond with your HTML, you have no `.ui-shadow` in your code. — pavel, Jun 04 '15 at 07:13
your button doesn't have a class, it's the
that is getting the class, not the so put your class in your input — Jeremy C., Jun 04 '15 at 07:15
@snehasish, check out this SO thread: http://stackoverflow.com/questions/14950238/can-you-style-html-form-buttons-with-css — bbh, Jun 04 '15 at 07:16
@SnehasishDas: below you have an answer. You used bad selector, I added an explanation how to. — pavel, Jun 04 '15 at 08:20

pavel · Answer 1 · 2015-06-04T08:36:47.167

If you have element with multiple classes (regarding comments at question), like

<div class="ui-btn ui-input-btn ui-corner-all ui-shadow">

and you need to set styles, you have two options:

First is to set background to one of these classes, eg.

.ui-corner-all {background: yellow;}

The second one, if you want to target just element with all classes, the correct selector is

.ui-btn.ui-input-btn.ui-corner-all.ui-shadow {background: yellow}

Your attempt .ui-block-b .ui-btn .ui-input-btn .ui-corner-all .ui-shadow tried to find .ui-shadow in .ui-corner-all in .ui-input-btn in .ui-btn in .ui-block-b like:

<div class="ui-block-b">
    <div class="ui-btn">
        <div class="ui-input-btn">
            <div class="ui-corner-all">
                <button class="ui-shadow">
            </div>
        </div>
    </div>
</div>

This HTML markup doesn't exist.

@SnehasishDas: But in your fiddle there is no `.ui-input-btn` class. The color is light because of `opacity: .1`. — pavel, Jun 04 '15 at 08:48
@SnehasishDas: try to do something yourself. It's so easy how to override one value by second one. — pavel, Jun 04 '15 at 09:09

score 0 · Answer 2 · answered Jun 04 '15 at 07:19

0

You have wrongly written the css code. Try this.

.ui-block-b input[type="submit"]{
           background:yellow;
        }

    <div data-role="ui-grid-a">

      <div class="ui-block-a" style="width:50%">
        <input type="button" id="Previous" value="Previous" onclick="window.location.href='%bind(:24)'" />
      </div>
      <div class="ui-block-b" style="width:50%">
     <input type="Submit" id="Submit" value="Save and Next" />
      </div>
    <div>

answered Jun 04 '15 at 07:19

Satrughna

93
2
14

Actually i didn't get what do you want exactly. – Satrughna Jun 04 '15 at 09:22
Yes, that i have made in that snippet. – Satrughna Jun 04 '15 at 11:59

score 0 · Answer 3 · answered Jun 04 '15 at 07:20

Use , between if you want to give css to multiple class.

And use > if you want to give css to input inside div.

.ui-block-b, .ui-btn, .ui-input-btn, .ui-corner-all, .ui-shadow{
       background:yellow;
    }

.ui-block-a > input{
  background:yellow;
  }

<div data-role="ui-grid-a">

  <div class="ui-block-a" style="width:50%">
    <input type="button" id="Previous" value="Previous" onclick="window.location.href='%bind(:24)'" />
  </div>
  <div class="ui-block-b" style="width:50%">
 <input type="Submit" id="Submit" value="Save and Next" />
  </div>
<div>

score -1 · Answer 4 · answered Jun 04 '15 at 07:15

-1

.ui-btn .ui-input-btn .ui-corner-all .ui-shadow these classes are non-existant.

answered Jun 04 '15 at 07:15

odedta

2,430
4
24
51

It's enough to only address one class, no need to write all of them. It would be better if you post a link or a working example. – odedta Jun 04 '15 at 08:14
1

This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. – Nico Jun 04 '15 at 09:53
@Nico, you might want to read the question and my answer again. – odedta Jun 04 '15 at 10:53

why the button is not taking the style?

4 Answers4