วิธีการทำเมนู dropdows แบบไม่มีพื้นหลัง

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
jamepiyawat
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 859
ลงทะเบียนเมื่อ: 21/05/2019 10:45 am

วิธีการทำเมนู dropdows แบบไม่มีพื้นหลัง

โพสต์โดย jamepiyawat » 09/08/2019 4:28 pm

สำหรับการทำปุ่มแล้วก็คงจะต้องใช้คำสั่ง css เพี่อจะได้ปรับแต่งปุ่มให้สวยงามตามที่เราต้องการวิธีการทำก็จะมีหลากหลายวิธีขึ้นอยู่ับว่าเราต้องการจะทำปุ่มออกมาเป็นแบบใดบทความนี้ผมก็จะมาแชร์วิธีการทำปุ่มแบบไม่มีพื้นหลังกันจะเป็นอย่างไรลองไปดูกันเลย

ปุ่ม dropdows ตอนแรกของผมก็จะเป็นแบบนี้

Selection_999(377).png
Selection_999(377).png (10.06 KiB) เปิดดู 92 ครั้ง


แต่ผมอย่ากได้ dropdows แบบนี้

Selection_999(379).png
Selection_999(379).png (8.45 KiB) เปิดดู 92 ครั้ง


code css ทั้งหมดก็จะเป็นแบบนี้

โค้ด: เลือกทั้งหมด

box-shadow: none;
  padding: 0.5em 3.5em 0.5em 1em;
  background-color: transparent;
  background-image:
          linear-gradient(45deg, transparent 50%, gray 50%),
          linear-gradient(135deg, gray 50%, transparent 50%);
  background-position:
          calc(100% - 20px) calc(1em + 2px),
          calc(100% - 15px) calc(1em + 2px);
  background-size:
          5px 5px,
          5px 5px;
  background-repeat: no-repeat;
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;


ผลลัพธ์ที่ได้
Selection_999(378).png
Selection_999(378).png (11.64 KiB) เปิดดู 92 ครั้ง


เรามาดูโค้ด css กันเลยดีกว่า

อันดับแรกเราก็ต้องใช้คำสั่งที่จะทำให้ไม่เป็นกล่องข้อความก่อนด้วยคำสั่ง

โค้ด: เลือกทั้งหมด

  box-shadow: none


แล้วก็จัดข้อความในกล่องให้สวยงาม

โค้ด: เลือกทั้งหมด

padding: 0.5em 3.5em 0.5em 1em


นำพื้นหลังออก

โค้ด: เลือกทั้งหมด

background-color: transparent


จากนั้นเราก็ให้ code css ในการทำลูกศรชี้ลงล่างด้วย code นี้

โค้ด: เลือกทั้งหมด

  background-image:
          linear-gradient(45deg, transparent 50%, gray 50%),
          linear-gradient(135deg, gray 50%, transparent 50%);
  background-position:
          calc(100% - 20px) calc(1em + 2px),
          calc(100% - 15px) calc(1em + 2px);
  background-size:
          5px 5px,
          5px 5px;

นำภาพพื้นหลัง และขอบออก

โค้ด: เลือกทั้งหมด

  background-repeat: no-repeat;
  border: none;

เมือเราสร้างลูกศรใหม่แล้วเราก็ต้องลบลูกศรเก่าออกด้วย code นี้

โค้ด: เลือกทั้งหมด

  -webkit-appearance: none;
  -moz-appearance: none;




เป็นอย่างไรบ้างครับดูเหมือนของต้นฉบับขึ้นมาบ้างหรือเปล่าก็เป็น code css ที่เอามาแชร์กันก็เป็นเพื่อทุกท่านที่ได้นำไปประยุกใช้ในงานกันนะครับก็หวังว่าบทความนี้จะเป็นความรุ้ให้กับทุกท่านที่เข้ามาอ่านกันนะครับ

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 10 และ บุคคลทั่วไป 0 ท่าน