0

I have some styles that I want to use in SharePoint but it always messes up my SharePoint page by making things appear weird. I can't even use something simple.

How can I use CSS to target just the elements inside of a div (myDiv below) that has an ID?

<h3>Using CSS to style an HTML Form</h3>

<div id="myDiv">
  <form action="/action_page.php">
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">

    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name..">

    <label for="country">Country</label>
    <select id="country" name="country">
      <option value="australia">Australia</option>
      <option value="canada">Canada</option>
      <option value="usa">USA</option>
    </select>

    <input type="submit" value="Submit">
  </form>
</div>

  <form action="/action_page.php">
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">

    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name..">

    <label for="country">Country</label>
    <select id="country" name="country">
      <option value="australia">Australia</option>
      <option value="canada">Canada</option>
      <option value="usa">USA</option>
    </select>

    <input type="submit" value="Submit">
  </form>

For more, please see codepen

  • Remove form control and then try, it might help you. and put "!important" after each css class attribute, that will help you to use your custom css only. – Hitendra Solanki Oct 18 '19 at 9:33
0

You can do it like below :

<style type="text/css">
  #myDiv
  {
    // your CSS styles
  }
  #fname
  {
    // your CSS styles
  }
  #lname
  {
    // your CSS styles
  }
  #country
  {
    // your CSS styles
  }
 </style>
| improve this answer | |
  • I have to do that for each one? I have a long form in my real applicatyion. Is there another way? – OLA Oct 18 '19 at 2:41
  • Not for each one. If ID is same then automatically it will inherit the style. Accept it as answer and upvote if it helps. – Ravi Oct 18 '19 at 4:04
0

In the div, it will have 2 inputboxes and 1 select dropdown which have Id, you could define CSS based on type:

<style type="text/css">
input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

div {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}
</style>

Style HTML Input Forms

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.