Summarize some common input style modification problems that are often used in front-end development
/*Change the default style of the checkbox*/ <input type="checkbox"class="input_check" id="check1"><label for="check1"></label>// element.input_check { position: absolute; width: 20px; height: 20px; border-radius: 50%;//Ground into rounded corners visibility: hidden;//Hide the original style background: #E92333; } .input_check+label { display: inline-block; width: 20px; border-radius: 50%; height: 20px; background: url('img/Group 8.png') no-repeat;//Store the image effect after clicking background-position: -31px -3px; border: 1px solid # AFAFAF;//Set border color background-size: 100% 100%; } .input_check:checked+label { background-position: 0px 0px;//Locate the picture and fill the boder with the picture}
// renderings
.inputreset{
border-left-width:0px;
border-top-width:0px;
border-right-width:0px;
border-bottom: 1px solid #d2d2d2;//leave only border
width: 300px;
background: transparent;
}
//Rendering (only the input box of the lower border)
input textarea{
text-indent: 2px;
}
// renderings
/*----------Used to remove the down arrow----------*/
input[type="date"]:: -webkit-calendar-picker-indicator {
display: none;
}
/*--------------remove up and down arrow buttons-------*/
input[type=date]: :-webkit-inner-spin-button { visibility: hidden; } /*---------- to remove the fork button ----------*/ input[type= "date"]::-webkit-clear-button{ display:none;
}
//Rendering (I don't need to post this effect, you can try it yourself)
/*Disable default submit style when input type=submit*/<form onsubmit="return false" > <input type="submit" />
</form>
Write incomplete, welcome to correct!