{"id":1128,"date":"2019-09-26T18:59:14","date_gmt":"2019-09-26T10:59:14","guid":{"rendered":"http:\/\/jilin.hydesign.tw\/?p=1128"},"modified":"2022-03-18T17:43:19","modified_gmt":"2022-03-18T09:43:19","slug":"css-forms","status":"publish","type":"post","link":"http:\/\/jilin.hydesign.tw\/index.php\/2019\/09\/26\/css-forms\/","title":{"rendered":"CSS Forms \u8868\u55ae"},"content":{"rendered":"\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"wp-block-heading\">Type<\/h2>\n\n\n\n<p>input\u8a2d\u5b9atype\u53c3\u6578<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/*type\u4f7f\u7528*\/\ninput[type=button], input[type=submit], input[type=reset] {\n  background-color: #4CAF50;\n  border: none;\n  color: white;\n  padding: 16px 32px;\n  text-decoration: none;\n  margin: 4px 2px;\n  cursor: pointer;\n}\n\n\/*\u7bc4\u4f8b*\/\n* {\n  box-sizing: border-box;\n}\n\ninput[type=text], select, textarea {\n  width: 100%;\n  padding: 12px;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  resize: vertical;\n}\ninput[type=submit] {\n  background-color: #4CAF50;\n  color: white;\n  padding: 12px 20px;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  float: right;\n}\n\ninput[type=submit]:hover {\n  background-color: #45a049;\n}<\/pre>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"wp-block-heading\">:focus<\/h2>\n\n\n\n<p>\u9ede\u64cainput\u8b8a\u8272<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">input[type=text]:focus {\n  background-color: lightblue;\n}\n\ninput[type=text]:focus {\n  border: 3px solid #555;\n}<\/pre>\n\n\n\n<p>\u9ede\u64cainput\u5bec\u5ea6\u62c9\u9577<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">input[type=text] {\n  width: 130px;\n  box-sizing: border-box;\n  border: 2px solid #ccc;\n  border-radius: 4px;\n  font-size: 16px;\n  background-color: white;\n  background-image: url('searchicon.png');\n  background-position: 10px 10px; \n  background-repeat: no-repeat;\n  padding: 12px 20px 12px 40px;\n  -webkit-transition: width 0.4s ease-in-out;\n  transition: width 0.4s ease-in-out;\n}\n\ninput[type=text]:focus {\n  width: 100%;\n}<\/pre>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"wp-block-heading\">::placeholder<\/h2>\n\n\n\n<p>input\u9810\u8a2d\u6587\u5b57<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;input type=\"text\" placeholder=\"\u5728\u6b64\u8f38\u5165\u63d0\u793a\u6587\u5b57\"><\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">::-webkit-input-placeholder { \/* Chrome\/Opera\/Safari *\/\n  color: pink;\n}\n::-moz-placeholder { \/* Firefox 19+ *\/\n  color: pink;\n}\n:-ms-input-placeholder { \/* IE 10+ *\/\n  color: pink;\n}\n:-moz-placeholder { \/* Firefox 18- *\/\n  color: pink;\n}\n::placeholder {\n  color: red;\n}\n\/*\u55ae\u7368\u8a2d\u5b9a\u5143\u7d20*\/\ninput[type=\"text\"].big-dog::-webkit-input-placeholder {\n  color: orange;\n}<\/pre>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"wp-block-heading\">resize<\/h2>\n\n\n\n<p>\u7e2e\u653etextarea\u5143\u7d20<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/*\u7121\u6cd5\u7e2e\u653e\u5143\u7d20 inherit initial unset*\/\ntextarea {\n  width: 100%;\n  height: 150px;\n  padding: 12px 20px;\n  box-sizing: border-box;\n  border: 2px solid #ccc;\n  border-radius: 4px;\n  background-color: #f8f8f8;\n  resize: none;\n}\n\n\/*\u6c34\u5e73\u5782\u76f4\u7e2e\u653e\u5143\u7d20 block inline*\/\ntextarea {\n  width: 100%;\n  height: 150px;\n  padding: 12px 20px;\n  box-sizing: border-box;\n  border: 2px solid #ccc;\n  border-radius: 4px;\n  background-color: #f8f8f8;\n  resize: both;\n}\n\n\/*\u6c34\u5e73\u7e2e\u653e\u5143\u7d20*\/\ntextarea {\n  width: 100%;\n  height: 150px;\n  padding: 12px 20px;\n  box-sizing: border-box;\n  border: 2px solid #ccc;\n  border-radius: 4px;\n  background-color: #f8f8f8;\n  resize: horizontal;\n}\n\n\/*\u5782\u76f4\u7e2e\u653e\u5143\u7d20*\/\ntextarea {\n  width: 100%;\n  height: 150px;\n  padding: 12px 20px;\n  box-sizing: border-box;\n  border: 2px solid #ccc;\n  border-radius: 4px;\n  background-color: #f8f8f8;\n  resize: vertical;\n}\n<\/pre>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Type input\u8a2d\u5b9atype\u53c3\u6578 :focus \u9ede\u64cainput\u8b8a\u8272 \u9ede\u64cainput\u5bec\u5ea6\u62c9\u9577 ::place&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,12,4],"tags":[],"class_list":["post-1128","post","type-post","status-publish","format-standard","hentry","category-css","category-front-end","category-notes"],"_links":{"self":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/1128","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/comments?post=1128"}],"version-history":[{"count":26,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/1128\/revisions"}],"predecessor-version":[{"id":6997,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/1128\/revisions\/6997"}],"wp:attachment":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/media?parent=1128"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/categories?post=1128"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/tags?post=1128"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}