input=submit 태그 관련 질문 드립니다.

조회수 509회
 input type="submit"

으로 코드를 작성할 경우 클릭 시 <input type="submit"> 박스 안의 이펙트가 변경 되는 것을 볼 수 있습니다. 혹시 클릭은 가능하나 이펙트가 변경되지 않게 하는 방법 알고 있으신 고수님들 있나요.

너무 답답해서 두서없이 올려봅니다.

  • 두서 없이 올리면 질문이 이해가 안되니 답변하기 힘듭니다. 실제로 작성한 코드와, 정확히 어디를 '클릭 시' '어느 박스'에 이펙트가 변경되는지 알 수 있게 작성해보세요. 편집요청빌런 2020.2.19 09:17

1 답변

  • 아마 이런 것을 말씀하시는게 아닌가 대강 짐작해 봅니다. 핵심은... :focus 유사요소의 CSS를 리셋시키는 겁니다.

    input[type="submit"]:focus {
      outline: none;
      box-shadow: 0 0 0;
      /* 기타 필요한 만큼 집어넣는 CSS 리셋코드 */
    }
    

    하지만 폼제출 요소에서 효과를 뺀다는 것은 웹표준이라는 관점에서는 정말 권고드리고 싶지 않은 아이디어입니다.

    • 사용자 사용성을 해침 ("어? 내가 이걸 눌렀나?")
    • 따라서 악용되기 좋음 (사용자 몰래 뭔가 제출하기)
    • 재수가 없으면 검색엔진이 "여기에 폼이 있다"는 사실을 인지하지 못할 수 있음

    정 아무 효과도 일어나지 않는 것을 원하신다면 이미지 파일을 하나 만들고 그 이미지의 onclick 이벤트로 폼 제출을 실행시키세요. 꽤 많은 게임사전예약 페이지들이 그렇게 합니다. (왜 그러는지는 모르겠지만.)

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)