CSS for fields on registration/ login page

  • Resolved aoi0515

    (@aoi0515)


    4 years, 4 months ago

    Hi,
    I want to add CSS to the fields on login/registration form.
    Here is what I wrote but didn’t work:

    .ur-frontend-form.ur-frontend-form–flat form .ur-form-row .ur-form-grid input[type=date], .ur-frontend-form.ur-frontend-form–flat form .ur-form-row .ur-form-grid input[type=email], .ur-frontend-form.ur-frontend-form–flat form .ur-form-row .ur-form-grid input[type=number], .ur-frontend-form.ur-frontend-form–flat form .ur-form-row .ur-form-grid input[type=password], .ur-frontend-form.ur-frontend-form–flat form .ur-form-row .ur-form-grid input[type=text], .ur-frontend-form.ur-frontend-form–flat form .ur-form-row .ur-form-grid input[type=url], .ur-frontend-form.ur-frontend-form–flat form .ur-form-row .ur-form-grid select, .ur-frontend-form.ur-frontend-form–flat form .ur-form-row .ur-form-grid textarea {
    border-bottom: solid 1px white;
    border-left: 0;
    border-top: 0;
    border-right: 0;
    padding: 10px 15px;
    background: rgba(0,0,0,0);
    color: white;
    margin-bottom: 10px;
    height: 35px;
    font-size: 13px;
    }

    Also I want to make the margin 0 of the top one of the fields on tablet and mobile screen.
    The page is here : https://kokoimalife.com/index.php/registration/
    Here is what I wrote and didn’t work:
    media=”only screen and (max-width: 768px)”
    @media screen and (max-width: 768px)
    .ur-frontend-form .ur-form-row .ur-form-grid {
    margin-bottom: 0px;
    }

    Thank you.

Viewing 1 replies (of 1 total)
  • Plugin Support sanjuacharya77

    (@sanjuacharya77)

    Hi @aoi0515,

    We are really sorry for the delay. To meet your requirements please add the given custom CSS on the Additional CSS section and it will do a trick.

    CSS selector to customize input styles.

    .ur-frontend-form.ur-frontend-form--flat form .ur-form-row .ur-form-grid input[type=date], .ur-frontend-form.ur-frontend-form--flat form .ur-form-row .ur-form-grid input[type=email], .ur-frontend-form.ur-frontend-form--flat form .ur-form-row .ur-form-grid input[type=number], .ur-frontend-form.ur-frontend-form--flat form .ur-form-row .ur-form-grid input[type=password], .ur-frontend-form.ur-frontend-form--flat form .ur-form-row .ur-form-grid input[type=text], .ur-frontend-form.ur-frontend-form--flat form .ur-form-row .ur-form-grid input[type=url], .ur-frontend-form.ur-frontend-form--flat form .ur-form-row .ur-form-grid select, .ur-frontend-form.ur-frontend-form--flat form .ur-form-row .ur-form-grid textarea {
  border-bottom: solid 1px white;
  border-left: 0;
  border-top: 0;
  border-right: 0;
  padding: 10px 15px;
  background: rgba(0,0,0,0);
  color: white;
  margin-bottom: 10px;
  height: 35px;
  font-size: 13px;
}

    .CSS code to make margin 0 for tablet and mobile screen.

    @media (max-width: 768px){
  .ur-frontend-form .ur-form-row:first-child {
    margin: 0;
  }
}

    Let me know whether it helps or not and I will get back to you.

    Thanks and Regards!

Viewing 1 replies (of 1 total)
  • The topic ‘CSS for fields on registration/ login page’ is closed to new replies.

Tags