Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
564 views
in Technique[技术] by (71.8m points)

html - HTML5/CSS3 - Change the look of resize handles

I don't want to turn off resizing completely, but the resize handles on textareas don't fit with the rest of the page style. Is there a way I can change how it looks, perhaps replacing it with an image of my own? There doesn't have to be backward compatibility for browsers that don't support HTML5.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

I made this by wrapping the textarea in a DIV, then placing a ::after element in that div which contains a symbol and has the same background-color as the textarea.

It is important to give the ::after element "pointer-events: none;" because otherwise the user can not click through it. This works in all modern browsers (http://caniuse.com/#feat=pointer-events).

resize handle icon

.textarea_wrapper::after {
    pointer-events: none;
    content: "↓";
    font-size: 14px;
    position: absolute;
    height: 22px;
    width: 20px;
    text-align: center;
    bottom: 2px;
    right: -2px;
    background-color: #efefef;
    color: #777;
}

Here is a fiddle: http://jsfiddle.net/herrfischerhamburg/59wy0ttj/7/


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...