|
 |
| |
สอบถามเกี่ยวกับการปรับขนาด ปุ่ม select option หน่อยครับ |
| |
 |
|
|
 |
 |
|
รูปนั้นเป็น font หรือ image?
ขอดู CSS การประกอบร่างของ element นี้ครับ
|
 |
 |
 |
 |
| Date :
2020-05-31 15:37:41 |
By :
PhrayaDev |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
 ตอบความคิดเห็นที่ : 1 เขียนโดย : PhrayaDev เมื่อวันที่ 2020-05-31 15:37:41
รายละเอียดของการตอบ ::
Code (PHP)
select {
-webkit-writing-mode: horizontal-tb !important;
text-rendering: auto;
color: -internal-light-dark-color(black, white);
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
-webkit-appearance: menulist;
box-sizing: border-box;
align-items: center;
white-space: pre;
-webkit-rtl-ordering: logical;
background-color: -internal-light-dark-color(rgb(255, 255, 255), rgb(59, 59, 59));
cursor: default;
margin: 0em;
font: 400 13.3333px Arial;
border-radius: 0px;
border-width: 1px;
border-style: solid;
border-color: -internal-light-dark-color(rgb(118, 118, 118), rgb(195, 195, 195));
border-image: initial;
}
|
| |
|
|
| |
| Date :
2020-05-31 16:54:40 |
By :
worapong39 |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
https://jsfiddle.net/9fcvztwr/
CSS ที่จขกท.โพสต์มา ไม่มีอะไรเกี่ยวข้องหรือใกล้เคียงกับ screenshot สักนิดเดียว
|
ประวัติการแก้ไข
2020-05-31 20:33:11
| |
|
|
| |
| Date :
2020-05-31 20:32:23 |
By :
mr.v |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
- No.2 เป็น UA stylesheet ของ Chrome ไม่ใช่ CSS ของ select element ในภาพ
- ตัวอย่าง No.3 เป็นการใช้รูปลูกศรจากรูปภาพ (image)
ส่วนอันนี้เป็นตัวอย่างการใช้รูปลูกศรจากฟอนต์ (FontAwesome)
Custom Select (HTML + CSS)
<div class="select-wrapper">
<select>
<option value="option-1">Option 1</option>
<option value="option-2">Option 2</option>
<option value="option-3">Option 3</option>
</select>
</div>
<style>
@font-face {
font-family: "FontAwesome";
font-weight: normal;
font-style : normal;
src : url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?v=4.3.0");
src : url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0") format("embedded-opentype"),
url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0") format("woff2"),
url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff?v=4.3.0") format("woff"),
url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.ttf?v=4.3.0") format("truetype"),
url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format("svg");
}
select {
/* การแสดงของ select */
background: #F0F3FB;
border: 1px solid #F0F3FB;
border-radius: 15px;
width: 100%;
padding: 1px;
font-size: 16px;
color: #3F3F3F;
/* reset ทุก browser */
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
/* สำหรับ IE */
select::-ms-expand {
display: none;
}
.select-wrapper {
position: relative;
width: 200px; /* กำหนดความยาวของ select ตรงนี้ */
}
/* กำหนดรูปแบบฟอนต์ลูกศร */
.select-wrapper:after {
font-family: FontAwesome;
content: '\f107'; /* รูปฟอนต์ (ลองเปลี่ยนเป็น \f103) */
font-size: 42px; /* ขนาด */
position: absolute;
top: -10px; /* margin แนวตั้ง จากบน */
right: 10px; /* margin แนวนอน จากขวา */
color: #434B67;
pointer-events: none;
}
</style>
https://www.w3schools.com/code/tryit.asp?filename=GFC2GSSSRFID
นอกจากนี้ยังมีการวาดภาพลูกศรด้วย CSS (กำหนดขนาดที่ border)
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_custom_select
|
| |
|
|
| |
| Date :
2020-05-31 22:28:32 |
By :
PhrayaDev |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 03
|
