• 회원가입
  • 로그인
  • 구글아이디로 로그인

[css] CSS - 인풋태그 높이통일 (= 동일높이 = 높이동일 = 높이같게 = 세로길이 똑같게 = 높이맞추기) INPUT TYPE TEXT SUBMIT HEIGHT EQAUL EQUAL

 

 

<style>

.input,

.submit {

    display: inline-block;

    padding: 10px 15px;

    font-size: 20px;

    border-radius: 0;

    -webkit-appearance: none;

}


.input {

    border: 1px solid lightgray;

}


.submit {

    background-color: lightgreen;

    border: 1px solid transparent;

}

.submit::-moz-focus-inner { 

    border: 0;

}

</style>

<form>

    <input class="input" type="search" placeholder="Search for...">

    <input class="submit" type="submit" value="Submit">

</form>

 

https://codepen.io/sinbi/pen/ZEYRqMw?editors=1100

※ 위 코드는 영문일 때만 적용.


분류 제목
selector CSS - :nth-of-type(n) 가상선택자 - 지정타입n번째 자식요소 (순서선택자,타입선택자, IE9…
selector CSS - :only-of-type 가상선택자 - 타입유일 자식요소 (= 유일타입 자식요소) [유일선택자|타…
selector CSS - :only-child 가상선택자 - 그 부모의 유일자식요소 (유일선택자, IE9)
selector CSS - :optional 가상선택자 - 선택입력요소 (= required 속성없는 요소, IE10)
selector CSS - :out-of-range 가상선택자 - 지정범위밖값 갖는 요소 선택 (=아웃어브레인지선택자, IE…
selector CSS - :read-only 가상선택자 - 읽기전용요소 (= readonly속성있는요소 = :read-on…
selector CSS - :read-write 가상선택자 - 읽고쓰기가능요소 (= readonly속성없는요소, IE13)
selector CSS - :required 가상선택자 - 필수입력요소 (= required속성있는요소, IE10)
selector CSS - :root 가상선택자 - 웹문서root요소 선택. (= 루트선택자, IE9)
selector CSS - :target 가상선택자 - 내부링크목적지요소 (= :target선택자 = 타겟선택자 = 목적지선…
selector CSS - :valid 가상선택자 - 유효요소 (= 유효값 갖는 요소 선택, IE10)
selector CSS - ::selection 가상선택자 - 사용자가 선택한 영역 (= ::selection선택자) (가상…
selector CSS - .class 클래스선택자 ★
selector CSS - .class1.class2 클래스선택자 ★★★ - 두 클래스가 (모두/함게/둘다/동시) 정의된 요…
selector CSS - .class1 .class2 클래스선택자 ★★ - class1자손 중 class2 갖는 모든 요소
flex CSS - flex 속성(I) ☆ - flex-grow, flex-shrink, flex-basis 속성 일…
flex CSS - flex-basis 속성(I) ★ - 아이템 초기 길이 (= 아이템너비 = flex-basis속성…
flex CSS - flex-grow 속성(I) ★ - 아이템 너비 증가 (= flex-grow속성 = 플렉스그로속성…
flex CSS - flex-shrink 속성(I) ★ - 동일컨테이너 안 나머지 플렉스아이템에 비해 얼마나 줄어들지…
css CSS - FADE-IN TEXT - 페이드인 텍스트 (= 서서히 사라지는 이미지 + 서서히 나타나는 글자)
14/25
목록
찾아주셔서 감사합니다. Since 2012