How to Add PlaceHolder to DatePicker & DropDown menu

  • Profile Image
    Asked on February 12, 2017 at 07:11 PM
  • Profile Image
    Answered 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.

  • Profile Image
    Answered on February 13, 2017 at 01: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.


    Thanks in Advance.

  • Profile Image
    Answered on February 13, 2017 at 06: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. 

  • Profile Image
    Answered on February 13, 2017 at 09: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.

  • Profile Image
    Answered 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:

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

    Let us know if you need more help.