How to Add PlaceHolder to DatePicker & DropDown menu

  • PriyaDubal18
    Asked on February 12, 2017 at 7:11 PM
  • Ian
    Replied on February 13, 2017 at 12:36 AM

    I am not, If I understand you.

    Please provide more information about what you are trying to achieve, so we can offer assistance.

  • PriyaDubal18
    Replied on February 13, 2017 at 1:58 AM

    I want to design a form section like below image.

    I have use DatePicker for Purchase Date: I want to show Purchase Date dd/mm/yy  text as placeholder.

    Also for dropdown the arrow in orange and Paceholder text  "Kalipak model" .

    When I select any dropdown option the text should be black. not gray. But I am unable to do it.

    You can check my current form. https://form.jotform.com/70406600333140.

     

    Thanks in Advance.

    How to Add How to Add PlaceHolder to DatePicker & DropDown menu  to DatePicker & DropDown menu  Image 1 Screenshot 20

  • Charlie
    Replied on February 13, 2017 at 6:52 AM

    For the drop down option, if you want to make the selection black, you can use this instead:

    select option[selected='true'] {

      color: black !important;;

    }

     

    select option {

      color: #aaa !important;

    }

    I also noticed that you have errors on your CSS code, make sure to correct them. 

    For the arrows and the placeholder on the widget, unfortunately, the arrow is a tricky part as it seems to already have a custom drop down arrow based on the theme that you have. 

    With regards to the Date Picker widget, we cannot directly add a placeholder on it using only CSS. You can try other date fields or widgets that we have. 

    I'll try to find some workaround but we cannot guarantee that we may find that would absolutely work. Apologies. 

  • PriyaDubal18
    Replied on February 13, 2017 at 9:13 AM

    Hi Thanks for the help.

    It would be great help if you let me know what errors did you see in my css code.

  • David JotForm Support Manager
    Replied on February 13, 2017 at 10:56 AM

    You need to go into the advanced editor to load the form designer, there click on the CSS tab, and remove the following:

    1) Remove the "#" character in line 78:

    How to Add How to Add PlaceHolder to DatePicker & DropDown menu  to DatePicker & DropDown menu  Image 1 Screenshot 30

    2) Remove the extra curly brackets in line 201 and 205:

    How to Add How to Add PlaceHolder to DatePicker & DropDown menu  to DatePicker & DropDown menu  Image 2 Screenshot 41

    Let us know if you need more help.