• CSS

크로스브라우징(CSS) 종합 [2018-02-10업데이트]

2019-02-10 454

설명

  • 카카오톡 링크

크로스브라우징(CSS)를 하면서 모아뒀던 소스입니다 추가적으로 계속 올릴 예정입니다~!

소스보기( X표시가 나타나면 무시하셔도 됩니다! )

<style>

/* 사파리 위에 선 생기는것 */
input, button, textarea {-webkit-appearance: none; -moz-appearance: none; appearance: none; }

/* select 세모 없애기 */
select {-webkit-appearance:none; -moz-appearance:none; appearance:none; }

/* 파이어폭스 number app--- */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance:textfield; }

/* 가운데정렬 */
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);

-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);

/* transition */
-moz-transition: right 0.05s ease; 
-webkit-transition: right 0.05s ease;
-ms-transition: right 0.05s ease; 
transition: right 0.05s ease;

/* border-radius */
-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
border-radius: 5px; 
-khtml-border-radius: 5px;

/* border-radius */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

/* box-shadow */
-webkit-appearance: none;
-webkit-box-shadow: 3px 3px 6px 6px #addacolor;
box-shadow: 3px 3px 6px 6px #addacolor;

/* rotate */
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Safari 3-8 */
transform: rotate(90deg);

</style>