Changing/Styling individual input elements in HTML - html

Question

Is there anyway to target specific input text elements in a form and reposition it, because it's letting me do things such as adjust padding, but I cannot reposition it by using margin. I also can't change the color, unless I do a style on the label. But doing a color on the label is useless because there's still the color in the input that I want to change. In short, I don't know how to override the original rule that I have for my input elements. Margins are not working either.
code:
input[type=text] {
width: 75%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block border: 1px solid #ccc;
border-radius: 4px;
color: #ffb3ec;
font-size: 24px;
box-sizing: border-box;
background-color: #4d4100;
}
.sample {
width: 30px;
background-color;
green;
}
<div class="mainBox">
<form>
<fieldset>
<label>placeholder:
<input type="text" id="placeholder" name="placeholder">
</label>
<br>
<label>Targets
<input type="text" class="sample" name="sample">
</label>
</fieldset>
</form>
</div>

Answer 1

You can wrap your input into a div element like below and reposition that:
<div class = "mainBox" >
<form>
<fieldset>
<div class = "wrapper">
<label> placeholder: </label>
<input type = "text" id = "placeholder" name = "placeholder" >
</div>
<br>
<div class = "wrapper">
<label> Targets </label>
<input type = "text" class = "sample" name = "sample" >
</div>
</fieldset>
</form>
</div>
I have rearranged the code a bit to fix the colour problem. It occurred, because you wrapped your input element inside the label. It doesn't work this way. Also remember to use for = "[THE ID OF YOUR INPUT ELEMENT]" to bind them together like so:
<label for = "sample"> Targets </label>
<input id = "sample" type = "text" class = "sample" name = "sample" >
In addition, before trying to play with top, bottom, left, right, paddings and margins always define the position of the element, because the default position is set to static, which means it isn't supposed to be moved.
position: static /* default, not supposed to be moved */
position: relative; /* to have move around its relative area */
position: absolute; /* to have move around based on the parent element */
position: fixed; /* to have move around based on the body of the document */