CSS Question on Placeholder & Text Field Styling

  • Profile Image
    unruhfurniture
    Asked on April 06, 2018 at 01: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;

    }


  • Profile Image
    liyam
    Answered on April 06, 2018 at 03: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.

  • Profile Image
    unruhfurniture
    Answered on April 06, 2018 at 04: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
    ...
  • Profile Image
    John_Benson
    Answered on April 06, 2018 at 08:32 PM

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

    1523061053Text_are.png

    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.