CSS Question on Placeholder & Text Field Styling

  • unruhfurniture
    Asked on April 6, 2018 at 1:34 PM

    Please see the attached screenshot for my question. Thanks so much for the help!


    Here's a copy of the CSS I currently have in this form:



    .form-required {

        color : #ffffff;

    }


    .form-line-error .form-error-message {

        background-color : #1D3648;

    }


    .form-line-error .form-error-message .form-error-arrow {

        border-bottom-color : #1D3648;

    }


    .form-line-error {

        background-color : #ffffff;

    }


    body, .form-all {

        background : none !important;

    }


    .form-all {

        margin-left : 100 !important;

    }


    .jotform-form {

        padding : 0!important;

    }


    .form-line-error .form-error-message {

        background-color : none;

    }


    .form-line-error .form-error-message .form-error-arrow {

        border-bottom-color : #ffffff;

    }


    .form-line-error {

        background-color : #ffffff;

    }


    .supernova .form-all {

        border : 0 !important;

        box-shadow : none !important;

        -moz-box-shadow : none !important;

        -webkit-box-shadow : none !important;

    }


    .form-line.form-line-active {

        background-color : #ffffff;

    }


    .form-buttons-wrapper {


    }


    .form-pagebreak {

        border-top : none;

    }


    .form-pagebreak {

        border-top : none;

        background : none;

    }


    #form-pagebreak-back_16 {

        display : none;

    }


    input#input_18_1000,  input#input_18_1000 + label {

        display : none;

    }


    .form-submit-button:hover {

        background : #1c3549 !important;

    }


    .form-submit-button:active {

        -moz-box-shadow : 0 0px #000 inset;

        -webkit-box-shadow : 0 0px #000 inset;

        box-shadow : 0 0px #000 inset;

    }


    .form-input-wide hr {

        display : none;

    }


    #input_18_donation {

        display : none;

    }


    #cid_18 .form-product-item,

    #cid_18 hr,

    #cid_18 > div > div {

        display : none !important;

    }


    table.payment-form-table th {

        display : none !important;

    }


    #id_53 {


    }


    .form-label.form-label-top {

        display : none;

    }


    ::-webkit-input-placeholder {

        color : #7b7b7b!important;

        font-weight : 300 !important;

        font-size : 13px !important;

    }


    :-moz-placeholder {

        color : #7b7b7b!important;

        font-weight : 300 !important;

        font-size : 13px !important;

    }


    /*--for IE10 support--*/

    :-ms-input-placeholder {

        color : #7b7b7b!important;

        font-weight : 300 !important;

        font-size : 13px !important;

    }


    Jotform Thread 1437586 Screenshot
  • liyam
    Replied on April 6, 2018 at 3:14 PM

    Hello,

    I suppose, for the dropdown, what you wish to happen is for its 1st option to appear as grayed out and show as black when an item is selected. On this case, please use this CSS code:

    select, select option {
      color: #000000;
    }

    select:invalid, select option[value=""] {
      color: #7b7b7b;
    }

    /*Added for browser compatibility*/
    [hidden] {
      display: none;
    }

    /*textarea placeholder font size */
    .form-custom-hint {
       font-size: 13px !important;
    }

    Unfortunately, I could not find a proper solution on switching the labels of the payment field to become placeholders. But in any case I find a solution for it, I will be sure to let you know.

    Thanks.

  • unruhfurniture
    Replied on April 6, 2018 at 4:43 PM
    Thanks so much! It's working great except the Larger Text Area field
    placeholder is a heavier weight than the other placeholders. Can you help
    with that? Also,
    can you help me remove the Red Border & Red Shadow around
    all the boxes that appears when you try to submit without completing a
    required field?

    Thanks!
    Sam
    *Sam Unruh*
    Owner, Unruh Furniture
    cell: 816.808.5259
    ...
  • John_Benson
    Replied on April 6, 2018 at 8:32 PM

    I checked your form and it seems that your question for the Larger Text Area field placeholder has been resolved. 

    1523061053Text are Screenshot 10

    As for the new question, we will be addressing it to a new thread to avoid confusion. Please wait for my reply on this link: https://www.jotform.com/answers/1437919

    Thank you.