surrealcms-formkeep-contact-example.css

    /* Setup a reasonable default font */
    body {
      font-family: "Roboto", sans-serif
    }

    /* Style all select, textareas and input types except color, radio, checkbox */
    input:not([type=color]):not([type=radio]):not([type=checkbox]),
    select,
    textarea {
      width: 100%;
      /* Full width */
      padding: 12px;
      /* Some padding */
      border: 1px solid #ccc;
      /* Gray border */
      border-radius: 4px;
      /* Rounded borders */
      box-sizing: border-box;
      /* Make sure that padding and width stays in place */
      margin-top: 6px;
      /* Add a top margin */
      margin-bottom: 16px;
      /* Bottom margin */
    }

    /* Style textarea elements */
    textarea {
      resize: vertical
        /* Allow the user to vertically resize the textarea (not horizontally) */
    }

    /* increase the size of the select element to match others */
    select {
      height: 4em;
    }

    /* add some space between the radio options*/
    input[type=radio] {
      margin-left: 10px;
      margin-right: 5px;
    }

    /* add some space between the checkbox options*/
    input[type=checkbox] {
      margin-right: 10px;
    }

    /* Style the submit button with a specific background color etc */
    button[type=submit] {
      background-color: #14b2cf;
      color: white;
      padding: 12px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-weight: bold;
    }

    /* When moving the mouse over the submit button, add a darker color */
    button[type=submit]:hover {
      background-color: #1091A9;
    }

    /* Add a background color and some padding around the form */
    .contact-us-container {
      border-radius: 5px;
      background-color: #f2f2f2;
      padding: 20px;
      width: 50%;
      margin: 30px;
    }