What is the best way to target elements in a DIV?
-
08-02-2021 - |
Вопрос
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
Решение
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>
Другие советы
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>
Не связан с sharepoint.stackexchange