CODEWITHSUNDEEP
jqueryinputoptimizely
bbacarat
bbacarat

Reputation: 253

Increase font size with jquery

I'm attempting to run a split test with Optimizely and need to increase the size of the font that is used as description text in my site search's search field.

I've managed to change the color using this code:

$("input[value]").css({"color":"#cc0000"});

But if I add on font-size to this nothing happens? i.e.

$("input[value]").css({"color":"#cc0000", "font-size" : "1.9rem"});

I've also tried the following but it still doesn't seem to work?? 

$("input").css({"font-size" : "1.9rem"});

Upvotes: 0

Views: 3813

Answers (4)

rrk
rrk

Reputation: 15846

It looks like you have !important over riding the changes made using .css() function. So do the following.

$("input")
    .css({
        'cssText':'font-size:1.9rem !important',
        'color':'#cc0000'
    });

DEMO

Upvotes: 4

Colm Ryan
Colm Ryan

Reputation: 1208

Is this just a typo? try 

$("input").css({"font-size" : "1.9em"});

'em' instead of 'rem'

Upvotes: 0

Canvas
Canvas

Reputation: 5897

I have provided a jsFiddle which will hopefully be the answer you are looking for

https://jsfiddle.net/07x2trL9/1/

Html

<input style="font-size:15px" class="big-font" type="text" />

Javascript/jQuery

$(function () {
    $('.big-font').css("font-size", "25px");
});

You simply target your input and change the size like so

Upvotes: 0

Barr J
Barr J

Reputation: 10929

Try do it like this: 

var fontSize = parseInt($("input").css("font-size"));
fontSize = fontSize + 1 + "px";
$("input").css({'font-size':fontSize});

or 

var fontSize = $('input').css('font-size').split('px')[0];

var fontInt = parseInt(fontSize) + 1;

fontSize = fontInt + 'px';

Upvotes: 1

Related Questions