Advanced CSS&Sass 05 - clip with linear-gradient, placeholder css and pseudo class, inherit in input

css front-end SASS
Self-Study
Publish Date:   2022-12-03
Update Date:   2023-04-11
Word Count:   86
Read Times:   1 Min
Read Count:  

Make color clip using linear-gradient

background-image:
        linear-gradient(100deg, rgba($color-white, .9) 50%, transparent 50%),
        url("../../img/nat-10.jpg");

Set css for input placeholder

About text color, font… in input

in html input tag, you have to set 

font-family: inherit;
color: inherit;
...

to make text in input consistent with in other tags, because browsers would select input again and force the default css into them.

Check validation in css

eg: email input

in html

in css

there is :placeholder-shown selector

A u t h o r: Joe
L i n k: https://h4lo343.github.io/2022/12/03/Advanced%20CSS&Sass%2005%20-%20clip%20with%20linear-gradient,%20placeholder%20css%20and%20pseudo%20class,%20inherit%20in%20input%20-%20%E5%89%AF%E6%9C%AC%20-%20%E5%89%AF%E6%9C%AC/
P o l i c y: All articles in this blog are used except for special statements CC BY 4.0 reprint policy. If reproduced, please indicate source Joe !
css front-end SASS
Leave Your Comment Here
  TOC