Input 테두리 색상 - Input teduli saegsang

Question

 <input type="text" name=""  class="" placeholder="       ">
        <input type="text" name=""  class="" placeholder="       ">

.info_contents_5 .info_con_padding input{
  width: 100%;
  height: 1.46rem;
  margin-bottom: 0.4rem;
  border-radius: 5px;
  border: 1px solid #d8d8d8;
  font-size: 0.64rem;
  padding-left: 0.2rem;
  outline: none;
}
.info_contents_5 .info_con_padding .inputs::-webkit-input-placeholder{/*Webkit browsers*/
  color:#000;
}

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script>
    $('input').focus(function(){
     $(this).css('border','1px solid #0678d1')
     $(this).addClass('inputs')
    })
    $('input').blur(function(){
      $(this).css('border','1px solid #d8d8d8')
      $(this).removeClass('inputs')
    })
  </script>

목차 Show

[CSS] input text focus border color, 포커스 시 테두리 색상 변경
■ CSS input text focus border color, 포커스 시 테두리 색상 변경
■ 예제
input, textarea, button 파란색 테두리 제거 및 색상 바꾸기
input box 테두리 변경방법

CSS

[CSS] input text focus border color, 포커스 시 테두리 색상 변경

chsr 2022. 4. 27. 09:51

■ CSS input text focus border color, 포커스 시 테두리 색상 변경

■ 예제

<input="text"> 요소 포커스 시 테두리 색상으로 변경하는 방법 (그림자 효과)

<style>
input:focus { outline: none !important; border-color: #d6a8e9; box-shadow: 0 0 10px #d6a8e9; }
</style>

<input type="text" placeholder="추가할 내용을 작성해주세요.">

■ 결과

캡처 - 예제 실행 결과

DEV/CSS

input, textarea, button 파란색 테두리 제거 및 색상 바꾸기

modric 2017. 8. 29. 11:35

input{ outline-style:none; }
outline-style = auto | none | dotted | dashed | solid | double | groove | ridge | inset | outset





default



 none



dotted



dashed



solid



double



groove



ridge




unset




outset

input:focus{ outline: 1px solid blue; }

outline-style : 외곽선 스타일
outline-color : 외곽선 색상
outline-offset : 외곽선과 요소의 가장자리 또는 border 사이에 공백
outline-width : 외곽선 폭
outline : 모든 외곽선의 속성 설정

Study/css

input box 테두리 변경방법

더 멋진 세상을 꿈꾸는 개발자 2020. 5. 4. 10:57

input 박스를 클릭 했을떄 나오는 테두리 색상 변경하기
input:focus {outline:2px solid #d50000;}

input 박스를 클릭 했을떄 나오는 테두리 색상 없애기
input:focus {outline:none;}

저작자표시

input 테두리 아래만 Input box 테두리 Input 테두리 제거 Input-placeholder ( color)

Input 테두리 색상 - Input teduli saegsang

[CSS] input text focus border color, 포커스 시 테두리 색상 변경

■ CSS input text focus border color, 포커스 시 테두리 색상 변경

■ 예제

■ 결과

input, textarea, button 파란색 테두리 제거 및 색상 바꾸기

input box 테두리 변경방법

관련 게시물

에펙 이미지 스트로크 - epeg imiji seuteulokeu

Jquery input text 값 가져오기 - jquery input text gabs gajyeoogi

PPT 테두리 디자인 - PPT teduli dijain

일러스트레이터 글자 두께 - illeoseuteuleiteo geulja dukke

Input type=date 기본값 - Input type=date gibongabs

광고하는

최근 소식

한국 가상 전화번호 만들기 - hangug gasang jeonhwabeonho mandeulgi

이케아 매트리스 방수커버 - ikea maeteuliseu bangsukeobeo

안드로이드 아이폰 벨소리 다운 - andeuloideu aipon belsoli daun

2옥 라 디시 - 2og la disi

디저트페어 2022 - dijeoteupeeo 2022

카카오톡 pc 페이스톡 카메라 오류 - kakaotog pc peiseutog kamela olyu

아스트로니어 테더 설치 - aseuteulonieo tedeo seolchi

우크라이나 우회 지원 - ukeulaina uhoe jiwon

스페이스마린 식사 - seupeiseumalin sigsa

낫또 이소 플라본 - nastto iso peullabon

광고하는

포퓰러

광고하는

에 대한

합법적인

돕다

사회의