WordPress.org

Forums

Simple Custom CSS
[resolved] quotation marks get turned into HTML entities (10 posts)

  1. Dion
    Member
    Posted 1 year ago #

    When I enter quotation marks (e.g input[placeholder="Your email address"]) they come out in the CSS as HTML entities (e.g. input[placeholder='Your email address']). This invalidates my code. Is it possible to change this?

    The reason I am styling a form input field based only on its placeholder is because that's the only attribute that differentiates it from another input field – I am dealing with two forms in different languages, and the translated text in one is longer than the original text in the other, so I need to adjust the size, margins etc as a result.

    http://wordpress.org/plugins/simple-custom-css/

  2. John Regan
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Dion!

    This is a bit tricky. I'm using an escaping function ( esc_html() ) on the output to prevent major destruction that can be caused by errors in the input. That's why the double quotes are being converted.

    I'm sure you have a good reason, but I'm curious as to why you can't add a class to the input to differentiate it from the other. That would be the best solution for this problem.

    Could you give me some more information on that?

    Thanks!

  3. Dion
    Member
    Posted 1 year ago #

    The forms are generated by plugins, I wouldn't know how to edit the plugins to insert a new class.

  4. John Regan
    Member
    Plugin Author

    Posted 1 year ago #

    Hmmm. That's a tough one. We shouldn't ever directly edit plugins, because our work can be deleted when they are updated (You probably already know that. I'm just writing it here in case someone else views this thread).

    One hacky method around this is to use jQuery to target that input, then add a class that way. Something like

    jQuery( 'input' ).each( function() {
    if ( jQuery( this ).attr( 'placeholder' ) == 'Your email address' ) {
    jQuery( this ).addClass( 'myclass' );
    }

    Then in your CSS you can do something like:

    input.myclass {
    --some style--
    }

    Of course this is hacky -- not the optimal way to do it, but it should get the job done in a pinch. Also, keep in mind that this is untested code, so you may have to fudge with it to get it to work.

    Anyway, I just wanted to take a shot at solving this issue. Thanks again for using this Plugin!

    John

  5. John Regan
    Member
    Plugin Author

    Posted 1 year ago #

    Shoot. I just realized I forgot my closing brackets on the jQuery. It should be more like:

    jQuery( 'input' ).each( function() {
    if ( jQuery( this ).attr( 'placeholder' ) == 'Your email address' ) {
    jQuery( this ).addClass( 'myclass' );
    }
    });

  6. jamiechong
    Member
    Posted 1 year ago #

    Another side effect to stripping quotes is that I can't add a pseudo class such as:

    .somediv:before {
      content: "";
    }
  7. Dion
    Member
    Posted 1 year ago #

    Hi John,

    Thanks for your response, sorry I didn't get back to you before. I know basically nothing about jQuery or javascript, so I don't know how to implement your suggestion, or even how to read the code so I can replace placeholders with the correct information (though I can probably learn that if I read up on it). Would I put your code inside <script> tags in Custom CSS, or somewhere else?

  8. John Regan
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Dion,

    In my first response to this thread, I mentioned that I use an escaping function due to security concerns. I've had a few other people mention that they'd like to use double quotes in their CSS, so I plan to include an option to disable this function in my next release. I can't say exactly when that will be, but it is top priority for my next release. I think it will help your situation quite a bit.

    Thanks!

    John

  9. Dion
    Member
    Posted 1 year ago #

    OK thanks John! I'll look out for it!

  10. John Regan
    Member
    Plugin Author

    Posted 1 year ago #

    Marking as resolved

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Simple Custom CSS
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic