How to style the submit button first word using jQuery or CSS

Question

I need to style the first/last word in submit button using jQuery or CSS.

Code below:

input.wpcf7-form-control.wpcf7-submit {
font-weight: 700;
}

   <div id="btnDiv" class="btnDiv"> <input type="submit" value="SUBMIT REQUEST" class="wpcf7-form-control wpcf7-submit"></div>

I want to change the first-word font weight to light, Is this possible?

Please note: I can't change my HTML code. This is a WordPress site. The Submit button coming from a plugin called 'Contact Form 7'.

Not possible with CSS alone https://stackoverflow.com/questions/55612/css-to-increase-size-of-first-word You'll have to change the HTML — CertainPerformance, Aug 09 '18 at 05:18
Oops, I can't change the HTML, It's coming from a plugin called contact form 7. This is a WordPress Site :( — Ali, Aug 09 '18 at 05:20
You say you can use jQuery (or Javascript), and if you can use Javascript, you *can* change the HTML — CertainPerformance, Aug 09 '18 at 05:21
Is it possible when you use html tag, i am not sure about button. You can use with tag like `p:first-letter` and `p:first-line` — jaydeep patel, Aug 09 '18 at 05:26
@Sarbaz Is there a `div` container for that button? Something like `
` — dcangulo, Aug 09 '18 at 05:34
If yes, then can you change the innerHTML of the div? and change it to a button as suggested in the answers? — dcangulo, Aug 09 '18 at 05:35
@Sarbaz Then can you update your question containing the parent element? — dcangulo, Aug 09 '18 at 05:37

dcangulo · Accepted Answer · 2018-08-09T05:50:18.867

If the snippet you've given has a parent element with id then you can just use the script below.

This will replace the <input> with <button> then applies the other answers.

document.getElementById('btnDiv').innerHTML = '<button type="submit" class="wpcf7-form-control wpcf7-submit"><span class="sub-text">SUBMIT</span> REQUEST</button>';

.sub-text{
  font-weight : 700;
}

<div id="btnDiv" class="btnDiv"> 
  <input type="submit" value="SUBMIT REQUEST" class="wpcf7-form-control wpcf7-submit">
</div>

Or if using jQuery you can use this instead:

$('#btnDiv').html('<button type="submit" class="wpcf7-form-control wpcf7-submit"><span class="sub-text">SUBMIT</span> REQUEST</button>');

.sub-text{
  font-weight : 700;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="btnDiv" class="btnDiv"> 
  <input type="submit" value="SUBMIT REQUEST" class="wpcf7-form-control wpcf7-submit">
</div>

score 0 · Answer 2 · answered Aug 09 '18 at 05:37

0

Go into the contact 7 form generator remove the input tag [submit] and append the following

<style>
.sub-text{
  font-weight : 700;
}
</style>
<button type="submit" class="wpcf7-form-control wpcf7-submit"><span class="sub-text">SUBMIT</span> REQUEST</button>

You have a from, as long as you have a input/button type submit it should work the same way it worked with a [submit] tag

answered Aug 09 '18 at 05:37

madalinivascu

32,064
4
39
55

@Sarbaz glad to have helped – madalinivascu Aug 09 '18 at 05:52

Kung Fu Panda · Answer 3 · 2018-08-09T05:54:20.210

0

Try using this!

document.getElementById("btnDiv").innerHTML = '<button type="submit" class="wpcf7-form-control wpcf7-submit"><span class="sub-text" style="font-weight : 700;">SUBMIT</span> REQUEST</button>';

<div id="btnDiv" class="btnDiv"> 
   <input type="submit" value="SUBMIT REQUEST" class="wpcf7-form-control wpcf7-submit">
</div>

edited Aug 09 '18 at 05:54

answered Aug 09 '18 at 05:46

Kung Fu Panda

636
10
22

score -2 · Answer 4 · answered Aug 09 '18 at 05:26

-2

You can try button tag instant of input button. See below snip.

.sub-text{
  font-weight : 700;
}

<button type="submit" class="wpcf7-form-control wpcf7-submit"><span class="sub-text">SUBMIT</span> REQUEST</button>

answered Aug 09 '18 at 05:26

A.K.

2,284
3
26
35

I can't change my HTML. – Ali Aug 09 '18 at 05:27
@Sarbaz if you can change the css you definitely can change the html as well – madalinivascu Aug 09 '18 at 05:28
@madalinivascu The HTML is generated by a WordPress plugin. You can only override default CSS generated but not HTML. You can change the HTML in the plugin file but it will be removed during plugin update. – dcangulo Aug 09 '18 at 05:29
@Sarbaz You can do whatever you want to do with HTML by jQuery but you have to put lots of effort. – A.K. Aug 09 '18 at 05:31
if i remember correctly contact7 allows for custom submit button – madalinivascu Aug 09 '18 at 05:34

How to style the submit button first word using jQuery or CSS

4 Answers4