Hello everyone, last article Share code snippets of 16 commonly used custom form component styles (Part 1) I have shared the first half of 16 common style code fragments, and today I share the remaining 8 custom component styles (Note: This article only gives the style part, and some interactions need to be realized with JS). This article is written with the simplest CSS layout as far as possible. I hope it will inspire you. Maybe you have other writing methods. I look forward to your sharing in the comment area.
9. Rating (5-star rating)
The business scenario of five-star rating query in service evaluation is shown in the figure below:
HTML part
<div class="rating"> <button class="rating__star">☆</button> <button class="rating__star">☆</button> <button class="rating__star">☆</button> <button class="rating__star">☆</button> <button class="rating__star">★</button> </div>
CSS part
.rating {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
flex-direction: row-reverse;
font-size: 32px;
}
.rating__star:hover,
.rating__star:hover ~ .rating__star {
color: transparent;
}
/*
Make all previous stars selected when hover on a star
Note that we use `flex-direction: row-reverse` on the container
*/
.rating__star:hover:before,
.rating__star:hover ~ .rating__star:before {
color: #00449e;
content: "\2605";
left: 0;
position: absolute;
}
.rating__star {
/* Reset styles for button */
background-color: transparent;
border: transparent;
margin: 0 2px;
padding: 0;
/* Used to position the hover state */
position: relative;
}
10. Search box
The search input box is also very common. We will display the search icon on the far left or right of the input box, as shown in the following figure:
HTML section
<div class="container"> <!-- Text input --> <input type="text" class="container__input" /> <!-- Search icon sticks to the left or right --> ... </div>
CSS part
.container {
display: flex;
/* If you want to place the icon before the text input */
flex-direction: row-reverse;
/* Border */
border: 1px solid rgba(0, 0, 0, 0.3);
}
.container__input {
border-color: transparent;
/* Take available width */
flex: 1;
}
11. Slider
The slider component is also a common component, such as adjusting the range of search values, music playback progress, etc., as shown in the following figure:
HTML part
<div class="container"> <!-- Left side --> <!-- Width based on the current value --> <div class="container__left" style="width: 20%"></div> <!-- Circle --> <div class="container__circle"></div> <!-- Right side --> <div class="container__right"></div> </div>
CSS part
.container {
/* Content is centered horizontally */
align-items: center;
display: flex;
/* Size */
height: 32px;
}
.container__left {
height: 2px;
/* Colors */
background-color: rgba(0, 0, 0, 0.3);
}
.container__circle {
/* Size */
height: 32px;
width: 32px;
/* Rounded border */
border-radius: 9999px;
/* Colors */
background-color: rgba(0, 0, 0, 0.3);
}
.container__right {
/* Take the remaining width */
flex: 1;
height: 2px;
/* Colors */
background-color: rgba(0, 0, 0, 0.3);
}
12. Spin button (up and down plus and minus button input box)
As shown in the figure below, there is an up and down arrow next to the button to facilitate the user to adjust the value:
HTML part
<div class="container">
<!-- Input -->
<input type="text" class="container__input" />
<!-- Buttons container -->
<div class="container__buttons">
<!-- Up button -->
<button class="container__button">...</button>
<!-- Down button -->
<button class="container__button">...</button>
</div>
</div>
CSS part
.container {
display: flex;
/* If you want to place the icon before the text input */
flex-direction: row-reverse;
/* Border */
border: 1px solid rgba(0, 0, 0, 0.3);
}
.container__input {
border-color: transparent;
/* Take available width */
flex: 1;
}
13. Stepper input
Sometimes, the input box with minus sign on the left and plus sign on the right is convenient for users to adjust the value, as shown in the following figure:
HTML part
<div class="stepper">
<!-- Minus button -->
<button class="stepper__button">-</button>
<!-- Input container -->
<div class="stepper__content">
<input type="text" class="stepper__input" />
</div>
<!-- Plus button -->
<button class="stepper__button">+</button>
</div>
CSS part
.stepper {
display: flex;
/* Border */
border: 1px solid rgba(0, 0, 0, 0.3);
/* Size */
height: 32px;
width: 128px;
}
.stepper__button {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Size */
width: 32px;
}
.stepper__content {
flex: 1;
}
.stepper__input {
/* Take full size of its container */
height: 100%;
width: 100%;
}
14. Switch (switch assembly)
Similar to the switch components related to Apple applications, it is also a very common component, such as the business scenario of system configuration. As shown in the figure below:
HTML section
<label class="label"> <input type="checkbox" class="label__input" /> <!-- Circle --> <div class="label__circle"></div> </label>
CSS part
.label {
display: flex;
/* Rounded border */
border-radius: 9999px;
/* Size */
height: 32px;
width: 64px;
/* OFF status */
background-color: rgba(0, 0, 0, 0.1);
border: 1px solid rgba(0, 0, 0, 0.3);
/* ON status */
background-color: #357edd;
border: 1px solid #357edd;
/* Push the circle to the right */
justify-content: flex-end;
}
.label__input {
/* Hide the input */
display: none;
}
.label__circle {
/* Rounded border */
border-radius: 9999px;
/* Size */
width: 32px;
background-color: #fff;
/* OFF status */
border: 1px solid rgba(0, 0, 0, 0.3);
}
15. Toggle password visibility
As shown in the figure below, a button is added to the right of the password box to display and hide the current password, as shown in the figure below:
HTML part
<div class="container"> <!-- Text input --> <input type="text" class="container__input" /> <!-- Toggle button sticks to the right --> <button>...</button> </div>
CSS part
.container {
display: flex;
/* Border */
border: 1px solid rgba(0, 0, 0, 0.3);
}
.container__input {
border-color: transparent;
/* Take available width */
flex: 1;
}
16. Upload button
Sometimes we need to personalize the native upload button component, as shown in the figure below, and replace it with a button:
HTML part
<div class="container"> <!-- The real file input --> <input type="file" class="container__input" /> <!-- The upload icon --> <div class="container__icon">...</div> <!-- The label --> ... </div>
CSS part
.container {
/* Used to position the input */
position: relative;
/* Center the content */
align-items: center;
display: flex;
/* Border */
border: 1px solid rgba(0, 0, 0, 0.3);
}
.container__input {
/* Take the full size */
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
/* Make it transparent */
opacity: 0;
}
.container__icon {
margin-right: 8px;
}
summary
That's all for today's article. I hope today's sharing will be helpful to your daily business. Thank you for reading.
Content source: https://github.com/1milligram/csslayout