Almondlab

WooCommerceで配送地域を一括登録。

2020.04.10 / Notes

WordPressのECサイト構築プラグインWooCommerceで、配送地域をSQLコマンドで一括登録する際のメモです。
登録する内容は、配送地域と、それぞれの配送地域に含まれる地域（都道府県）、配送方法（定額送料）になります。

-- 配送地域を登録
INSERT INTO `wp_woocommerce_shipping_zones` (`zone_id`, `zone_name`, `zone_order`) VALUES
(1,	'北海道',	0),
(2,	'東北',	0),
(3,	'関東',	0),
(4,	'甲信越',	0),
(5,	'北陸',	0),
(6,	'東海',	0),
(7,	'関西',	0),
(8,	'中国',	0),
(9,	'四国',	0),
(10,	'九州',	0),
(11,	'沖縄',	0);

-- 各配送地域に地域（都道府県）を登録
INSERT INTO `wp_woocommerce_shipping_zone_locations` (`location_id`, `zone_id`, `location_code`, `location_type`) VALUES
(1,	1,	'JP:JP01',	'state'),
(2,	2,	'JP:JP02',	'state'),
(3,	2,	'JP:JP03',	'state'),
(4,	2,	'JP:JP04',	'state'),
(5,	2,	'JP:JP05',	'state'),
(6,	2,	'JP:JP06',	'state'),
(7,	2,	'JP:JP07',	'state'),
(8,	3,	'JP:JP08',	'state'),
(9,	3,	'JP:JP09',	'state'),
(10,	3,	'JP:JP10',	'state'),
(11,	3,	'JP:JP11',	'state'),
(12,	3,	'JP:JP12',	'state'),
(13,	3,	'JP:JP13',	'state'),
(14,	3,	'JP:JP14',	'state'),
(15,	4,	'JP:JP15',	'state'),
(16,	4,	'JP:JP19',	'state'),
(17,	4,	'JP:JP20',	'state'),
(18,	5,	'JP:JP16',	'state'),
(19,	5,	'JP:JP17',	'state'),
(20,	5,	'JP:JP18',	'state'),
(21,	6,	'JP:JP21',	'state'),
(22,	6,	'JP:JP22',	'state'),
(23,	6,	'JP:JP23',	'state'),
(24,	6,	'JP:JP24',	'state'),
(25,	7,	'JP:JP25',	'state'),
(26,	7,	'JP:JP26',	'state'),
(27,	7,	'JP:JP27',	'state'),
(28,	7,	'JP:JP28',	'state'),
(29,	7,	'JP:JP29',	'state'),
(30,	7,	'JP:JP30',	'state'),
(31,	8,	'JP:JP31',	'state'),
(32,	8,	'JP:JP32',	'state'),
(33,	8,	'JP:JP33',	'state'),
(34,	8,	'JP:JP34',	'state'),
(35,	8,	'JP:JP35',	'state'),
(36,	9,	'JP:JP36',	'state'),
(37,	9,	'JP:JP37',	'state'),
(38,	9,	'JP:JP38',	'state'),
(39,	9,	'JP:JP39',	'state'),
(40,	10,	'JP:JP40',	'state'),
(41,	10,	'JP:JP41',	'state'),
(42,	10,	'JP:JP42',	'state'),
(43,	10,	'JP:JP43',	'state'),
(44,	10,	'JP:JP44',	'state'),
(45,	10,	'JP:JP45',	'state'),
(46,	10,	'JP:JP46',	'state'),
(47,	11,	'JP:JP47',	'state');

-- 各配送地域に配送方法（定額送料）を登録
INSERT INTO `wp_woocommerce_shipping_zone_methods` (`zone_id`, `instance_id`, `method_id`, `method_order`, `is_enabled`) VALUES
(1,	1,	'flat_rate',	1,	1),
(2,	2,	'flat_rate',	1,	1),
(3,	3,	'flat_rate',	1,	1),
(4,	4,	'flat_rate',	1,	1),
(5,	5,	'flat_rate',	1,	1),
(6,	6,	'flat_rate',	1,	1),
(7,	7,	'flat_rate',	1,	1),
(8,	8,	'flat_rate',	1,	1),
(9,	9,	'flat_rate',	1,	1),
(10,	10,	'flat_rate',	1,	1),
(11,	11,	'flat_rate',	1,	1);

-- 配送地域を登録

INSERT INTO `wp_woocommerce_shipping_zones` (`zone_id`, `zone_name`, `zone_order`) VALUES

(1, '北海道', 0),

(2, '東北', 0),

(3, '関東', 0),

(4, '甲信越', 0),

(5, '北陸', 0),

(6, '東海', 0),

(7, '関西', 0),

(8, '中国', 0),

(9, '四国', 0),

(10, '九州', 0),

(11, '沖縄', 0);

-- 各配送地域に地域（都道府県）を登録

INSERT INTO `wp_woocommerce_shipping_zone_locations` (`location_id`, `zone_id`, `location_code`, `location_type`) VALUES

(1, 1, 'JP:JP01', 'state'),

(2, 2, 'JP:JP02', 'state'),

(3, 2, 'JP:JP03', 'state'),

(4, 2, 'JP:JP04', 'state'),

(5, 2, 'JP:JP05', 'state'),

(6, 2, 'JP:JP06', 'state'),

(7, 2, 'JP:JP07', 'state'),

(8, 3, 'JP:JP08', 'state'),

(9, 3, 'JP:JP09', 'state'),

(10, 3, 'JP:JP10', 'state'),

(11, 3, 'JP:JP11', 'state'),

(12, 3, 'JP:JP12', 'state'),

(13, 3, 'JP:JP13', 'state'),

(14, 3, 'JP:JP14', 'state'),

(15, 4, 'JP:JP15', 'state'),

(16, 4, 'JP:JP19', 'state'),

(17, 4, 'JP:JP20', 'state'),

(18, 5, 'JP:JP16', 'state'),

(19, 5, 'JP:JP17', 'state'),

(20, 5, 'JP:JP18', 'state'),

(21, 6, 'JP:JP21', 'state'),

(22, 6, 'JP:JP22', 'state'),

(23, 6, 'JP:JP23', 'state'),

(24, 6, 'JP:JP24', 'state'),

(25, 7, 'JP:JP25', 'state'),

(26, 7, 'JP:JP26', 'state'),

(27, 7, 'JP:JP27', 'state'),

(28, 7, 'JP:JP28', 'state'),

(29, 7, 'JP:JP29', 'state'),

(30, 7, 'JP:JP30', 'state'),

(31, 8, 'JP:JP31', 'state'),

(32, 8, 'JP:JP32', 'state'),

(33, 8, 'JP:JP33', 'state'),

(34, 8, 'JP:JP34', 'state'),

(35, 8, 'JP:JP35', 'state'),

(36, 9, 'JP:JP36', 'state'),

(37, 9, 'JP:JP37', 'state'),

(38, 9, 'JP:JP38', 'state'),

(39, 9, 'JP:JP39', 'state'),

(40, 10, 'JP:JP40', 'state'),

(41, 10, 'JP:JP41', 'state'),

(42, 10, 'JP:JP42', 'state'),

(43, 10, 'JP:JP43', 'state'),

(44, 10, 'JP:JP44', 'state'),

(45, 10, 'JP:JP45', 'state'),

(46, 10, 'JP:JP46', 'state'),

(47, 11, 'JP:JP47', 'state');

-- 各配送地域に配送方法（定額送料）を登録

INSERT INTO `wp_woocommerce_shipping_zone_methods` (`zone_id`, `instance_id`, `method_id`, `method_order`, `is_enabled`) VALUES

(1, 1, 'flat_rate', 1, 1),

(2, 2, 'flat_rate', 1, 1),

(3, 3, 'flat_rate', 1, 1),

(4, 4, 'flat_rate', 1, 1),

(5, 5, 'flat_rate', 1, 1),

(6, 6, 'flat_rate', 1, 1),

(7, 7, 'flat_rate', 1, 1),

(8, 8, 'flat_rate', 1, 1),

(9, 9, 'flat_rate', 1, 1),

(10, 10, 'flat_rate', 1, 1),

(11, 11, 'flat_rate', 1, 1);

登録後は次のようになります。

配送地域
都道府県の「JP01〜JP47」は北海道から沖縄に該当しますが、一覧はこちら。

JP01：北海道
JP02：青森県
JP03：岩手県
JP04：宮城県
JP05：秋田県
JP06：山形県
JP07：福島県
JP08：茨城県
JP09：栃木県
JP10：群馬県
JP11：埼玉県
JP12：千葉県
JP13：東京都
JP14：神奈川県
JP15：新潟県
JP16：富山県
JP17：石川県
JP18：福井県
JP19：山梨県
JP20：長野県
JP21：岐阜県
JP22：静岡県
JP23：愛知県
JP24：三重県
JP25：滋賀県
JP26：京都府
JP27：大阪府
JP28：兵庫県
JP29：奈良県
JP30：和歌山県
JP31：鳥取県
JP32：島根県
JP33：岡山県
JP34：広島県
JP35：山口県
JP36：徳島県
JP37：香川県
JP38：愛媛県
JP39：高知県
JP40：福岡県
JP41：佐賀県
JP42：長崎県
JP43：熊本県
JP44：大分県
JP45：宮崎県
JP46：鹿児島県
JP47：沖縄県

JP01：北海道

JP02：青森県

JP03：岩手県

JP04：宮城県

JP05：秋田県

JP06：山形県

JP07：福島県

JP08：茨城県

JP09：栃木県

JP10：群馬県

JP11：埼玉県

JP12：千葉県

JP13：東京都

JP14：神奈川県

JP15：新潟県

JP16：富山県

JP17：石川県

JP18：福井県

JP19：山梨県

JP20：長野県

JP21：岐阜県

JP22：静岡県

JP23：愛知県

JP24：三重県

JP25：滋賀県

JP26：京都府

JP27：大阪府

JP28：兵庫県

JP29：奈良県

JP30：和歌山県

JP31：鳥取県

JP32：島根県

JP33：岡山県

JP34：広島県

JP35：山口県

JP36：徳島県

JP37：香川県

JP38：愛媛県

JP39：高知県

JP40：福岡県

JP41：佐賀県

JP42：長崎県

JP43：熊本県

JP44：大分県

JP45：宮崎県

JP46：鹿児島県

JP47：沖縄県

phpMyAdminやWP-DBManagerのようなプラグインからSQLコマンドを実行できますが、事前にバックアップをとってから慎重に行った方が良いです。

Drupal8で「node.html.twig」をURLエイリアスごとに振り分ける際のメモ。

2020.04.03 / Notes

ノード用テンプレート「node.html.twig」でURLエイリアスに基づいて、テンプレートファイルの命名規則を追加します。
例えば「company」ページの場合「node-company.html.twig」といった命名規則になります。

function THEME_NAME_theme_suggestions_node_alter(array &$suggestions, array $variables) {
	if (\Drupal::routeMatch()->getParameter('node')) {
		$alias = \Drupal::request()->getPathInfo();
		$alias = ltrim($alias, '/');
		$alias = ($alias) ? $alias : 'front';
		$suggestions[] = 'node__'.str_replace('/', '_', $alias);
	}
}

function THEME_NAME_theme_suggestions_node_alter(array &$suggestions, array $variables) {

if (\Drupal::routeMatch()->getParameter('node')) {

$alias = \Drupal::request()->getPathInfo();

$alias = ltrim($alias, '/');

$alias = ($alias) ? $alias : 'front';

$suggestions[] = 'node__'.str_replace('/', '_', $alias);

}

上記ではトップページの場合「node-front.html.twig」に、「company/about」ページの場合「node-company-about.html.twig」となるようにしています。

FullCalendarバージョン4の設置サンプル。

2019.08.14 / Labs

カレンダーの生成に便利なFullCalendarがバージョン4になり、ファイル構成や記述方法が大きく変わりましたので、簡単なサンプルを作成しました。
FullCalendarのJavaScript、CSSの各ファイル（計4点）はCDNから読み込んでいます。
サンプルはこちら

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>FullCalendar</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.js"></script>
<script>

//本日、カレンダーの開始日、終了日と、曜日のテキストを用意します
var date_now = new Date();
var date_start = new Date(date_now.getFullYear(), date_now.getMonth(), 1);
var date_end = new Date(date_now.getFullYear(), date_now.getMonth(), 1);
var days = ["日", "月", "火", "水", "木", "金", "土"];
date_end.setMonth(date_end.getMonth()+12);

document.addEventListener("DOMContentLoaded", function() {

  //FullCalendarを生成します
  var calendar = new FullCalendar.Calendar(document.getElementById("calendar"), {

    //プラグインを読み込みます
    plugins: ["dayGrid"],

    //ヘッダー内の配置を、左に前月ボタン、中央にタイトル、右に次月ボタンに設定します
    header: {
      left: "prev",
      center: "title",
      right:" next"
    },

    //ボタンのテキストを書き換えます
    buttonText: {
      prev: "前の月",
      next: "次の月"
    },

    //デフォルト日を本日に設定します
    defaultDate: date_now,

    //有効期間を当月1日から12ヶ月後（1年後）に設定します。
		validRange: {
      start: date_start,
      end: date_end
    },

    //イベント情報をJSONファイルから読み込みます
		events: "events.json",

    //タイトルを書き換えます（2019年8月）
    titleFormat: function(obj) {
      return obj.date.year+"年"+(obj.date.month+1)+"月";
    },

    //曜日のテキストを書き換えます（日〜土）
    columnHeaderText: function(obj) {
      return days[obj.getDay()];
    },

    //イベントのクリック時の処理を加えます
    eventClick: function(obj) {
      alert(obj.event.title);
    }
  });
  calendar.render();
});
</script>
</head>
<body>

<!-- カレンダーのコンテナ -->
<div id="calendar"></div>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>FullCalendar</title>

//本日、カレンダーの開始日、終了日と、曜日のテキストを用意します

var date_now = new Date();

var date_start = new Date(date_now.getFullYear(), date_now.getMonth(), 1);

var date_end = new Date(date_now.getFullYear(), date_now.getMonth(), 1);

var days = ["日", "月", "火", "水", "木", "金", "土"];

date_end.setMonth(date_end.getMonth()+12);

document.addEventListener("DOMContentLoaded", function() {

//FullCalendarを生成します

var calendar = new FullCalendar.Calendar(document.getElementById("calendar"), {

//プラグインを読み込みます

plugins: ["dayGrid"],

//ヘッダー内の配置を、左に前月ボタン、中央にタイトル、右に次月ボタンに設定します

header: {

left: "prev",

center: "title",

right:" next"

//ボタンのテキストを書き換えます

buttonText: {

prev: "前の月",

next: "次の月"

//デフォルト日を本日に設定します

defaultDate: date_now,

//有効期間を当月1日から12ヶ月後（1年後）に設定します。

validRange: {

start: date_start,

end: date_end

//イベント情報をJSONファイルから読み込みます

events: "events.json",

//タイトルを書き換えます（2019年8月）

titleFormat: function(obj) {

return obj.date.year+"年"+(obj.date.month+1)+"月";

//曜日のテキストを書き換えます（日〜土）

columnHeaderText: function(obj) {

return days[obj.getDay()];

//イベントのクリック時の処理を加えます

eventClick: function(obj) {

alert(obj.event.title);

}

});

calendar.render();

});

</script>

</head>

<body>

</body>

</html>

日本語化には標準で各言語に対応（ドキュメント）していますが、細かい調整のためにそちらはあえて使わず、個別に書き換えています。
イベント情報のJSONファイル（events.json）は次のように記述しています。外部ファイルではなく、直接記述でもOKです。

[
    {
        "title": "イベント1",
        "start": "2019-08-15",
        "className": ["event event-01"]
    },
    {
        "title": "イベント2",
        "start": "2019-09-15",
        "className": ["event event-02"]
    },
    {
        "title": "イベント3",
        "start": "2019-10-15",
        "className": ["event event-03"]
    },
    {
        "title": "イベント4",
        "start": "2019-11-15",
        "className": ["event event-04"]
    },
    {
        "title": "イベント5",
        "start": "2019-12-15",
        "end": "2019-12-20",
        "className": ["event event-05"]
    }
]

[

{

"title": "イベント1",

"start": "2019-08-15",

"className": ["event event-01"]

{

"title": "イベント2",

"start": "2019-09-15",

"className": ["event event-02"]

{

"title": "イベント3",

"start": "2019-10-15",

"className": ["event event-03"]

{

"title": "イベント4",

"start": "2019-11-15",

"className": ["event event-04"]

{

"title": "イベント5",

"start": "2019-12-15",

"end": "2019-12-20",

"className": ["event event-05"]

}

]

サイトをリニューアルしました。

2019.06.17 / Notes

Other

当サイトのデザインテーマを一新して、リニューアルしました。
今回は、非常にシンプルな構成にしています。

フォームのデザインのまとめ。

2017.12.19 / Labs

フォーム内のテキストフィールドなどのパーツデザインのカスタマイズのまとめです。
サンプルはこちら

デザインは基本的にCSSのみで行なっています。セレクトボックスの下向き矢印のみSVG画像を使用しています。
フォームのHTMLはこちら。

<form>
<input type="text" placeholder="テキストフィールド">
<br>
<br>
<textarea placeholder="テキストエリア"></textarea>
<br>
<br>
<select>
<option value="0">セレクト1</option>
<option value="1">セレクト2</option>
<option value="2">セレクト3</option>
</select>
<br>
<br>
<label class="option"><input type="radio" name="radio" value="0"><span><i></i></span>ラジオボタン1</label>
<label class="option"><input type="radio" name="radio" value="1"><span><i></i></span>ラジオボタン2</label>
<label class="option"><input type="radio" name="radio" value="2"><span><i></i></span>ラジオボタン3</label>
<br>
<br>
<label class="option"><input type="checkbox" name="checkbox" value="0"><span><i></i></span>チェックボックス1</label>
<label class="option"><input type="checkbox" name="checkbox" value="1"><span><i></i></span>チェックボックス2</label>
<label class="option"><input type="checkbox" name="checkbox" value="2"><span><i></i></span>チェックボックス3</label>
<br>
<br>
<input type="button" value="汎用ボタン">
<input type="submit" value="送信ボタン">
</form>

<form>

<br>

<br>

</select>

<br>

<label class="option"><input type="radio" name="radio" value="0"><span><i></i></span>ラジオボタン1</label>

<label class="option"><input type="radio" name="radio" value="1"><span><i></i></span>ラジオボタン2</label>

<label class="option"><input type="radio" name="radio" value="2"><span><i></i></span>ラジオボタン3</label>

<br>

<label class="option"><input type="checkbox" name="checkbox" value="0"><span><i></i></span>チェックボックス1</label>

<label class="option"><input type="checkbox" name="checkbox" value="1"><span><i></i></span>チェックボックス2</label>

<label class="option"><input type="checkbox" name="checkbox" value="2"><span><i></i></span>チェックボックス3</label>

<br>

</form>

CSSはこちら。ラジオボタン、チェックボックスでは本来のパーツを非表示にして、<span>タグで独自のパーツを作成しています。

body {
	font-family: "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", Verdana, Meiryo, sans-serif;
}
input[type=text],
input[type=email],
input[type=password],
input[type=button],
input[type=submit],
textarea,
select {
	box-sizing: border-box;
	font-size: 16px;
	line-height: 30px;
	outline: none;
	border: none;
	margin: 0px;
	border-radius: 5px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
input[type=text],
input[type=email],
input[type=password],
select,
textarea {
	background-color: #eeeeee;
}
input[type=text],
input[type=email],
input[type=password],
textarea {
	line-height: 20px;
}
input[type=text],
input[type=email],
input[type=password] {
	height: 30px;
	text-indent: 10px;
	padding: 5px 0px;
}
input[type=button],
input[type=submit] {
	display: inline-block;
	text-align: center;
	color: #ffffff;
	cursor: pointer;
	padding: 0px 10px;
	background-color: #666666;
	transition: 0.25s opacity ease;
}
input[type=button]:hover,
input[type=submit]:hover {
	opacity: 0.75;
}
label.option {
	margin-right: 20px;
}
label.option input[type=radio],
label.option input[type=checkbox] {
	display: none;
}
label.option input[type=radio] + span,
label.option input[type=checkbox] + span {
	display: inline-block;
	position: relative;
	width: 20px;
	height: 20px;
	vertical-align: middle;
	cursor: pointer;
	margin-right: 5px;
	background-color: #eeeeee;
}
label.option input[type=radio] + span {
	border-radius: 50%;
}
label.option input[type=checkbox] + span {
	border-radius: 5px;
}
label.option input[type=radio] + span i,
label.option input[type=checkbox] + span i {
	display: block;
	position: absolute;
	opacity: 0;
	transition: 0.25s opacity ease;
}
label.option input[type=radio] + span i {
	width: 10px;
	height: 10px;
	left: 5px;
	top: 5px;
	background-color: #666666;
	border-radius: 50%;
}
label.option input[type=checkbox] + span i {
	width: 5px;
	height: 10px;
	left: 6px;
	top: 1px;
	border-right: 3px solid #666666;
	border-bottom: 3px solid #666666;
	transform: rotate(45deg);
}
label.option input[type=radio]:checked + span i,
label.option input[type=checkbox]:checked + span i {
	opacity: 1;
}
select {
	height: 30px;
	padding: 0px 40px 0px 10px;
	background-image: url(images/arrow-select.svg);
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: auto 10px;
}
select::-ms-expand {
	display: none;
}
textarea {
	padding: 5px 10px;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

body {

font-family: "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", Verdana, Meiryo, sans-serif;

}

input[type=text],

input[type=email],

input[type=password],

input[type=button],

input[type=submit],

textarea,

select {

box-sizing: border-box;

font-size: 16px;

line-height: 30px;

outline: none;

border: none;

margin: 0px;

border-radius: 5px;

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

}

input[type=text],

input[type=email],

input[type=password],

select,

textarea {

background-color: #eeeeee;

}

input[type=text],

input[type=email],

input[type=password],

textarea {

line-height: 20px;

}

input[type=text],

input[type=email],

input[type=password] {

height: 30px;

text-indent: 10px;

padding: 5px 0px;

}

input[type=button],

input[type=submit] {

display: inline-block;

text-align: center;

color: #ffffff;

cursor: pointer;

padding: 0px 10px;

background-color: #666666;

transition: 0.25s opacity ease;

}

input[type=button]:hover,

input[type=submit]:hover {

opacity: 0.75;

}

label.option {

margin-right: 20px;

}

label.option input[type=radio],

label.option input[type=checkbox] {

display: none;

}

label.option input[type=radio] + span,

label.option input[type=checkbox] + span {

display: inline-block;

position: relative;

width: 20px;

height: 20px;

vertical-align: middle;

cursor: pointer;

margin-right: 5px;

background-color: #eeeeee;

}

label.option input[type=radio] + span {

border-radius: 50%;

}

label.option input[type=checkbox] + span {

border-radius: 5px;

}

label.option input[type=radio] + span i,

label.option input[type=checkbox] + span i {

display: block;

position: absolute;

opacity: 0;

transition: 0.25s opacity ease;

}

label.option input[type=radio] + span i {

width: 10px;

height: 10px;

left: 5px;

top: 5px;

background-color: #666666;

border-radius: 50%;

}

label.option input[type=checkbox] + span i {

width: 5px;

height: 10px;

left: 6px;

top: 1px;

border-right: 3px solid #666666;

border-bottom: 3px solid #666666;

transform: rotate(45deg);

}

label.option input[type=radio]:checked + span i,

label.option input[type=checkbox]:checked + span i {

opacity: 1;

}

select {

height: 30px;

padding: 0px 40px 0px 10px;

background-image: url(images/arrow-select.svg);

background-repeat: no-repeat;

background-position: right 10px center;

background-size: auto 10px;

}

select::-ms-expand {

display: none;

}

textarea {

padding: 5px 10px;

}