Put a colon at the conclusion of both of these titles

Question

Put a colon at the conclusion of both of these titles

Here is the form code:

<form method="post" action="https://www.publictalksoftware.co.uk/wp-login.php" class="bbp-login-form">
  <fieldset class="bbp-form">
    <legend>Create an Account</legend>

    <div class="bbp-template-notice">
      <p>Your username must be unique, and cannot be changed later.</p>
      <p>We use your email address to email you a secure password and verify your account.</p>

    </div>

    <div class="bbp-username">
      <label for="user_login">Username: </label>
      <input type="text" name="user_login" value="" size="20" id="user_login" tabindex="101">
    </div>

    <div class="bbp-email">
      <label for="user_email">Email: </label>
      <input type="text" name="user_email" value="" size="20" id="user_email" tabindex="102">
    </div>

    <p><label>Security Question</label></p>
    <p>
      <select name="seq_ques[]" class="input" style="font-size:14px; height:35px;">
        <option value="16">"Sing Out Joyfully to Jehovah" Scripture?</option>
      </select><label>Your Answer<br><input type="text" name="seq_ans[]" id="seq_ans[]" value="" class="input"></label></p>
    <div class="anr_captcha_field">
      <div id="anr_captcha_field_1" class="anr_captcha_field_div">
        <div style="width: 304px; height: 78px;">
          <div><iframe src="https://www.google.com/recaptcha/api2/anchor?ar=1&amp;k=6Lc061QUAAAAAHzXUIbnlghp8LcJD1x5EtlRfrQi&amp;co=aHR0cHM6Ly93d3cucHVibGljdGFsa3NvZnR3YXJlLmNvLnVrOjQ0Mw..&amp;hl=en-GB&amp;v=66WEle60vY1w2WveBS-1ZMFs&amp;theme=light&amp;size=normal&amp;cb=1bfdqzy83l4n"
              width="304" height="78" role="presentation" name="a-wtj5g7sxqs30" frameborder="0" scrolling="no" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups-to-escape-sandbox"></iframe></div>
          <textarea
            id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid rgb(193, 193, 193); margin: 10px 25px; padding: 0px; resize: none; display: none;"></textarea>
        </div>
      </div>
    </div>
    <div class="bbp-submit-wrapper">

      <button type="submit" tabindex="103" name="user-submit" class="button submit user-submit">Register</button>


      <input type="hidden" name="action" value="register">
      <input type="hidden" name="user-cookie" value="1">

      <input type="hidden" id="bbp_redirect_to" name="redirect_to" value="?checkemail=registered"><input type="hidden" id="_wpnonce" name="_wpnonce" value="19d211952c"><input type="hidden" name="_wp_http_referer" value="/register/">
    </div>
  </fieldset>
</form>

Here is a fiddle:

https://jsfiddle.net/jvawo134/

My actual page is here.

It displays a form:

https://i.sstatic.net/mDeWh.png

Can CSS be used to append : after the last two labels in this specific form only:

Security Question
Your Answer

Some context: The two labels mentioned are added by a WordPress plugin to the form. As per the given solution, additional CSS styling can accomplish half of the task:

.bbp-login-form fieldset p label:after {
  content: ':';
}

This will add a colon to the first label but adding it to the second label is tricky. Looking at the code:

<label>Your Answer<br>
       <input type="text" name="seq_ans[]" id="seq_ans[]" value="" class="input">
</label>

You see? We need to insert : just before the <br> tag for this label, and I'm encountering difficulty achieving that. Currently, using the snippet above, the colon ends up after the input box.

Update

Since the label is within a p, I applied this styling for the first label:

.bbp-login-form p label:nth-child(1)::after {
  content: ':';
}

So the first one is now working.

Update

Following the advice provided, I have included more CSS that works:

.bbp-login-form p label:nth-child(2) {
  font-size: 0;
}

.bbp-login-form p label:nth-child(2):before {
  font-size: 16px;
  content: "Your answer:";
}

The downside is that the final input box has reduced in height.

Final CSS

.bbp-login-form p label:nth-child(1)::after {
   content: ':'
}

.bbp-login-form p label:nth-child(2) {
  font-size: 0;
}

.bbp-login-form p label:nth-child(2)::before {
  font-size: 16px;
  content: "Your answer:";
}

.bbp-login-form p input {
    font-size: 12px !important;
}

html css forms

Answer 1

Answer №1

If you want to add a colon after certain labels, you can use the ::after pseudo-element and set the content property to a colon.

.with-colon::after {
  content: ':';
}

<label class="with-colon">My Label</label>

If you don't have the option to add specific classes to the labels, there are a few ways you can achieve this:

Inspect the injected markup to see if any elements have classes you can target.
Use the :nth-child selector to target specific labels within the form.
Alternatively, you could remove colons from other labels and then target all labels in the form with the ::after pseudo-element.

Answer 2

If you want to add a colon after certain labels, you can use the ::after pseudo-element and set the content property to a colon.

.with-colon::after {
  content: ':';
}

<label class="with-colon">My Label</label>

If you don't have the option to add specific classes to the labels, there are a few ways you can achieve this:

Inspect the injected markup to see if any elements have classes you can target.
Use the :nth-child selector to target specific labels within the form.
Alternatively, you could remove colons from other labels and then target all labels in the form with the ::after pseudo-element.

Answer 3

Answer №2

If you want to customize the security question label, you can achieve it using CSS:

.bbp-email + p > label:after {
    content: " :";
}

For modifying the Your Answer Label with JavaScript, you have a couple of options. You can use the following script:

 jQuery(document).ready(function($){
$('.bbp-email + p + p > label').html('<label>Your Answer:<br><input type="text" name="seq_ans[]" id="seq_ans[]" value="" class="input"></label>');
});

Alternatively, you can directly add the JavaScript code to your functions.php file:

function add_this_script_footer(){ ?>
<script type="text/javascript> 
jQuery(document).ready(function($){ 
$('.bbp-email + p + p > label').html('<label>Your Answer:<br><input type="text" name="seq_ans[]" id="seq_ans[]" value="" class="input"></label>'); });
</script>
<?php } 
add_action('wp_footer', 'add_this_script_footer'); ?>

Answer 4

If you want to customize the security question label, you can achieve it using CSS:

.bbp-email + p > label:after {
    content: " :";
}

For modifying the Your Answer Label with JavaScript, you have a couple of options. You can use the following script:

 jQuery(document).ready(function($){
$('.bbp-email + p + p > label').html('<label>Your Answer:<br><input type="text" name="seq_ans[]" id="seq_ans[]" value="" class="input"></label>');
});

Alternatively, you can directly add the JavaScript code to your functions.php file:

function add_this_script_footer(){ ?>
<script type="text/javascript> 
jQuery(document).ready(function($){ 
$('.bbp-email + p + p > label').html('<label>Your Answer:<br><input type="text" name="seq_ans[]" id="seq_ans[]" value="" class="input"></label>'); });
</script>
<?php } 
add_action('wp_footer', 'add_this_script_footer'); ?>

Put a colon at the conclusion of both of these titles

Update

Update

Final CSS

Answer №1

Answer №2

Similar questions

Steps for adding a background image in ASP.NET MVC4

A single status update triggers numerous calls to the getStatus function within the Lync platform

Positioning an image at the bottom left of the page using absolute positioning is simply not effective

The min-width of 100vh is functioning properly on mobile devices, however, it is not working as expected on PCs when set to 100

Load an external script once the page has finished loading by leveraging the power of $(document).ready() in conjunction with $.getScript()

How can I align navigation items to the right in Bootstrap 4?

Move the contents of a div to the right side

retrieve the parent id of <ul> elements and store them in an array

SQL queries can be used in Node.js to fetch data from various tables and display it on an HTML page

Angular - iterating through arrays with the *ngFor directive

Having difficulty in getting the heading to align with the left side

What is the process for generating and launching an HTML page straight from LocalStorage?

Are you familiar with PowerShell and its innovative modular GUI capabilities?

CSS - Fixed header does not move when scrolling

Dynamic Product Showcase using Bootstrap Framework

Ensuring that the text-box is the same size as the image

Adaptable picture within a bootstrap container

If the option is 'Gel', use an if statement to console log

Creating input fields in Angular 2

Integrate a PHP link into a Gatsby/React project