HTML 裡面的 inline 和 inline-block
基本上，inline 就是讓元件在前一個元件的同一行，然後加了 block，代表可以指定寬度
所以
inline : 同一行，動態寬度
block : 會換行，指定寬度
inline-block : 同一行，指定寬度
Label 是一個附屬元件，可以指定給其他元件，比如說 input。當對 Label 觸發事件，像是滑鼠點擊事件，則會傳給它所附屬的元件
如何調整 input type= file 之中，顯示的字和按鈕的樣式：
方法一：使用 hidden input + button 和 label 元件，然後套用 ref
方法二：用客製元件，畫好按鈕和顯示樣置，然後上面蓋一個透明的 input_file_object
<style>
div.fileinputs {
position: relative;
}
div.fakefile {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
input.file {
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
</style>
<div class="fileinputs">
<input type="file" class="file" />
<div class="fakefile">
<input />
<img src="search.gif" />
</div>
</div>
方法三：使用-webkit-file-upload-button 和 file-selector-button 等等 attribute 改來按鈕樣式
input[type=file]::-webkit-file-upload-button {
border: 2px solid #6c5ce7;
padding: .2em .4em;
border-radius: .2em;
background-color: #a29bfe;
transition: 1s;
}
input[type=file]::file-selector-button {
border: 2px solid #6c5ce7;
padding: .2em .4em;
border-radius: .2em;
background-color: #a29bfe;
transition: 1s;
}
input[type=file]::-webkit-file-upload-button:hover {
background-color: #81ecec;
border: 2px solid #00cec9;
}
input[type=file]::file-selector-button:hover {
background-color: #81ecec;
border: 2px solid #00cec9;
}方法四：使用 label for 和 hidden input
.custom-file-input::-webkit-file-upload-button {
visibility: hidden;
}
.custom-file-input::before {
content: 'Select some files';
display: inline-block;
background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
border: 1px solid #999;
border-radius: 3px;
padding: 5px 8px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
text-shadow: 1px 1px #fff;
font-weight: 700;
font-size: 10pt;
}
.custom-file-input:hover::before {
border-color: black;
}
.custom-file-input:active::before {
background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}<label class="custom-file-input" for="Upload" >
</label>
<input id="Upload" type="file" multiple="multiple" name="_photos" accept="image/*" style="visibility: hidden">