Get the App
SLTechnology News&Howtos  ›  Development  › 

How css sets the clear button in the text box

Shulou Source: shulou.com Published: 2022-06-01 06:51:35 10月04日 Update

Xiaobian to share with you how css in the text box set clear button, I hope you have read this article after harvest, let us discuss it together!

Let's first look at a specific example of setting the clear button

code is as follows

HTML code

CSS code

style.css

.searchFrame{

position:relative;

display:inline-block;

}

.inputBox{

padding-right:20px;

width:120px;

}

.searchFrame.clearButton{

width:13px;

height:13px;

position:absolute;

right:2px;

top:1px;

background:url(img/d.jpg)no-repeatleftcenter;

cursor:pointer;

}

description

In the above code, prepare a "searchFrame" frame around the text box. Place the Clear button at the right end of the searchFrame frame. Place the stylesheet on the right by setting its correct properties. The "searchFrame" frame is designated "display: inline-block," which is a frame that tightly surrounds the text box.

After reading this article, I believe you have a certain understanding of "how to set the clear button in the text box of css". If you want to know more about this knowledge, please pay attention to the industry information channel. Thank you for reading!

Tags: Buttons text code frames central settings articles finished properties more styles knowledge examples industry information information channels channels first come prepare Apple Docker Huawei Linux macOS MariaDB Microsoft MySQL NVidia OPPO Reno Huawei MariaDB Apple Linux MySQL