Como alterar a cor de uma etiqueta com código CSS?

  • welenson
    Perguntado em 29 de maio de 2024 às 16:48

    Estou fazendo um teste para que o nome do campo fique em vermelho, dentro do meu formulario é o campo 44.

    Segue link do formulario.

    https://www.jotform.com/pt/build/241495648029061

    Para esse ajuste seria em configurações de widget, CSS personalizado?

    Usei o codigo abaixo para testar:

    /* Estilização da label do campo para cor vermelha */

    label#label_44 {

      color: red;

      font-weight: bold; /* Opcional: torna o texto em negrito */

    }


    /* Estilização do campo de entrada com máscara */

    input#input_44 {

      padding: 10px;

      font-size: 16px;

      border: 2px solid #4CAF50;

      border-radius: 5px;

      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

      width: 100%;

      max-width: 300px;

      margin: 10px 0;

    }


    /* Foco no campo de entrada */

    input#input_44:focus {

      border-color: #3e8e41;

      outline: none;

      box-shadow: 0 0 5px rgba(62, 142, 65, 0.5);

    }


    /* Caixa do campo */

    .form-line {

      margin-bottom: 20px;

    }


  • Lorenz Jotform Support
    Respondido em 29 de maio de 2024 às 22:00

    Hi Welenson,

    Thanks for reaching out to Jotform Support. Our Portuguese Support agents are busy helping other Jotform users at the moment. I'll try to help you in English using Google Translate, but you can reply in whichever language you feel comfortable using. Or, if you'd rather have support in Portuguese, let us know and we can have them do that. But, keep in mind that you'd have to wait until they're available again. 

    Now, going back to your question. Do you want to change the field's label text color? I checked your form 241495648029061, but I can't seem to locate the field 44 you're referring to? Can you share with us a screenshot of the field so we can check and help you out with the code to use? We have a guide about that here.

    Once we hear back from you, we'll be able to help you with this.

  • welenson
    Respondido em 29 de maio de 2024 às 22:57

    Como alterar a cor de uma etiqueta com código CSS? Image 1 Screenshot 20

  • Vincenzo Jotform Support
    Respondido em 30 de maio de 2024 às 03:03

    Hi Welenson,

    Thanks for getting back to us and for sharing the screenshot. That made your request much clearer. Changing the color of the label named "Valor do Contrato" is easy, you will just need to inject a CSS code. Let me show you how to do that:

    1. In Form Builder, click on the Form Designer button, on the top right side of the screen.
    2. Next, click on the Style tab.
    3. Scroll down to Inject Custom CSS and paste the code provided below:
    /* Change color of Label of #input_44 to Red - 15376431 */
    #label_44 {
        color: red;
        font-weight: bold;
    }
    /* Code Ends Here */

    Como alterar a cor de uma etiqueta com código CSS? Image 1 Screenshot 30

    Result:

    Como alterar a cor de uma etiqueta com código CSS? Image 2 Screenshot 41

    Give it a try and reach out again if you have any other questions.

  • welenson
    Respondido em 30 de maio de 2024 às 09:03

    Obrigado pela ajuda! Qualquer campo que eu queira alterar eu vou adicionando o codigo abaixo?

  • Lorenz Jotform Support
    Respondido em 30 de maio de 2024 às 09:33

    Hi Welenson,

    Thanks for getting back to us. If you want to change other field's label color, you will need to get the field's label ID and use the same code. Let me walk you through it:

    1. In the Form Builder, select any particular field.

    2. Click on the Gear icon.

    3. Go to the Advanced tab and in the Field Details section, toggle down the button.

    4. Under the Field IDs, there's a text box there that contains the field's ID. You just need to get the number ID, and replace input with label.

    Como alterar a cor de uma etiqueta com código CSS? Image 1 Screenshot 30

    For example, in my screencast above. The name field's ID is input_3, you will need to change the word 'input' to 'label', so the code should be something like this:

    #label_3{
    color: blue;
    }

    Check this out:

    Como alterar a cor de uma etiqueta com código CSS? Image 2 Screenshot 41

    Give it a try and let us know if there's anything else we can help you with.