Override css with your own css

Question

I have a layout coming from a 3rd party source which I need to override in my own css. I am able to change the styles by using common css rules like:

#someid-div input[type=checkbox]{
    display:block;
}

and

#someid-container .h1 {
    font-size:20px !important;
}

but now i have a different situation in which I need to wrap around or introduce additional tags to show the desired layout. e.g.

<div class="row" style="margin-bottom: 20px;">
            <div class="form-group col-sm-6">
                <label class="control-label" for="email">Email</label>
                <input name="email" class="form-control" id="email" type="text">
            </div>
 </div>

to something like:

<div class="row" style="margin-bottom: 20px;">
    <div class="form-group col-sm-4">
       <label class="control-label" for="email">Email</label>
    </div>
    <div class="form-group col-sm-6">
        <input name="email" class="form-control" id="email" type="text">
    </div>
</div>

Is this possible in CSS? Or do I need to use jquery for it? A code snippet would be appreciated. Thanks

so you want to change the html too? yes you have to use jquery/ajax for this. — Leo the lion
– Leo the lion, Commented Nov 26, 2015 at 6:04
this html is coming from a 3rd party and will be changing depending upon different selections from their drop downs, so how can I use my jquery to change the html based on a specific selection — sam
– sam, Commented Nov 26, 2015 at 6:13

bibliophilsagar · Accepted Answer · 2015-11-26 06:30:51Z

1

You can achieve it using jquery. Something like this will do.

    $(".row").empty();
    var html = '<div class="form-group col-sm-4"><label class="control-label" for="email">Email</label></div><div class="form-group col-sm-6"><input name="email" class="form-control" id="email" type="text"></div>';
    $(".row").append(html);

Insert it after your intended operation is successful.

answered Nov 26, 2015 at 6:30

bibliophilsagar

1,7532 gold badges20 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arg0n · Accepted Answer · 2015-11-26 06:22:06Z

0

Something like this in jQuery (untested):

var label = $("label[for='email']");
var parent = label.parent();
$("<div>").setClass("form-group col-sm-4").append(label).insertBefore(parent);

answered Nov 26, 2015 at 6:22

Arg0n

8,4532 gold badges26 silver badges39 bronze badges

1 Comment

sam Over a year ago

Thanks, as I explained above that this html is dynamically being loaded from a 3rd party (based on a dropdown provided by them), so is there anything we need to do to check when we have 'email' box loaded and when we have 'passport' box?

Collectives™ on Stack Overflow

Override css with your own css

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related