728x90

Does anyone know if it's possible to align text to the right of a <select> or more specifically <option> element in WebKit. This does not need to be a cross-browser solution including IE, but should be pure CSS if it is possible.

I have tried both:

select { text-align: right } and option { text-align: right }, but neither seems to have worked in WebKit (either Chrome, Safari or Mobile Safari.

Any help gratefully received!

  
shareimprove this question
up vote51down voteaccepted

You could try using the "dir" attribute, but I'm not sure that would produce the desired effect?

<select dir="rtl">
    <option>Foo</option>    
    <option>bar</option>
    <option>to the right</option>
</select>

Demo here: http://jsfiddle.net/fparent/YSJU7/

shareimprove this answer
2 
Actually, that's perfect. I was using the appearance: none; attribute anyway, so the position of the dropdown doesn't matter. Thanks! – BenM Oct 27 '11 at 18:48
18 
This does not work in all cases: <option>23" x 42"</option> yields " x 42"23. rtl also changes how it is read in a screen reader. – Jason T Featheringham Aug 30 '12 at 17:37 
2 
RTL - is the text direction (as example for arabic text) jsfiddle.net/iegik/YSJU7/170 – iegik Sep 23 '12 at 11:45
6 
Doesn't it look like a dirty hack just to give it the proper look without thinking about how it would be processed in some special cases? – Sergei Basharov May 30 '13 at 8:04 
19 
IMHO this is bad for two reasons. 1. It's semantically wrong. 2. In Chrome 30, dir="rtl" moves the arrow indicating the drop-down to the left. – feklee Oct 31 '13 at 20:13
up vote24down vote

I think what you want is:

select {
  direction: rtl;
}

fiddled here: http://jsfiddle.net/neilheinrich/XS3yQ/


'WEB > CSS' 카테고리의 다른 글

[CSS] text-justify  (0) 2018.02.05
HTML5 number inputs – Comma and period as decimal marks  (0) 2018.01.24
[CSS] Vertical Align  (0) 2018.01.24
[CSS]크로스 브라우징  (0) 2018.01.24
CSS background Property ❮ PreviousComplete CSS Reference Next ❯  (0) 2018.01.24
728x90
Category
 
CSS Tutorial

CSS에서 텍스트의 가로 가운데 정렬은 text-align 속성을 이용합니다.

text-align: center;

요소의 가로 가운데 정렬은 margin 속성을 이용합니다.

margin-left: auto;
margin-right: auto;

그렇다면 다음처럼 세로 정렬을 가운데로 하려면 어떻게 해야 할까요?

여러 가지 방법이 있는데, 그 중 세 가지를 소개해드립니다. 세 방법 모두 아래의 결과를 만듭니다.

방법 1 - padding 속성 이용하기

바깥쪽 요소에 padding 속성을 추가해서 세로 정렬을 가운데로 할 수 있습니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS | Coding Factory</title>
    <style>
      .a {
        border: 1px solid #444444;
        width: 500px;
        padding: 100px 0px;
      }
      .b {
        border: 1px solid #444444;
        background-color: #444444;
      }
      h1 {
        text-align: center;
        color: #ffffff;
      }
    </style>
  </head>
  <body>
    <div class="a">
      <div class="b">
        <h1>Lorem Ipsum Dolor</h1>
      </div>
    </div>
  </body>
</html>

방법 2 - margin 속성 이용하기

안쪽 요소에 margin 속성을 추가해서 세로 정렬을 가운데로 할 수 있습니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS | Coding Factory</title>
    <style>
      .a {
        border: 1px solid #444444;
        width: 500px;
      }
      .b {
        border: 1px solid #444444;
        background-color: #444444;
        margin: 100px 0px;
      }
      h1 {
        text-align: center;
        color: #ffffff;
      }
    </style>
  </head>
  <body>
    <div class="a">
      <div class="b">
        <h1>Lorem Ipsum Dolor</h1>
      </div>
    </div>
  </body>
</html>

방법 3 - display: table-cell 이용하기

바깥쪽 요소에

display: table-cell;

을 추가하여 표의 셀처럼 만듭니다. 그리고

vertical-align: middle;

을 추가하여 세로 정렬을 가운데로 만듭니다.

위 방법들과는 다르게, 바깥쪽 요소의 높이(height)를 정해줘야 합니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS | Coding Factory</title>
    <style>
      .a {
        border: 1px solid #444444;
        width: 500px;
        height: 300px;
        display: table-cell;
        vertical-align: middle;
      }
      .b {
        border: 1px solid #444444;
        background-color: #444444;
      }
      h1 {
        text-align: center;
        color: #ffffff;
      }
    </style>
  </head>
  <body>
    <div class="a">
      <div class="b">
        <h1>Lorem Ipsum Dolor</h1>
      </div>
    </div>
  </body>
</html>

CSS3의 flexible box를 이용하면 쉽게 세로 가운데 정렬을 구현할 수 있습니다. 하지만 IE 11부터 지원한다는 문제가 있습니다.

참고


'WEB > CSS' 카테고리의 다른 글

HTML5 number inputs – Comma and period as decimal marks  (0) 2018.01.24
Select box dir  (0) 2018.01.24
[CSS]크로스 브라우징  (0) 2018.01.24
CSS background Property ❮ PreviousComplete CSS Reference Next ❯  (0) 2018.01.24
[CSS]text-indent  (0) 2018.01.18
728x90

http://webberstudy.com/html-css/css-2/cross-browser/

'WEB > CSS' 카테고리의 다른 글

Select box dir  (0) 2018.01.24
[CSS] Vertical Align  (0) 2018.01.24
CSS background Property ❮ PreviousComplete CSS Reference Next ❯  (0) 2018.01.24
[CSS]text-indent  (0) 2018.01.18
CSS: How to align vertically a “label” and “input” inside a “div”?  (0) 2018.01.18
728x90

Example

Set different background properties in one declaration:

body { 
    background: lightblue url("img_tree.gif") no-repeat fixed center; 
}
Try it Yourself »

Definition and Usage

The background shorthand property sets all the background properties in one declaration.

The properties that can be set, are: background-color, background-image, background-position, background-size, background-repeat, background-origin, background-clip, and background-attachment.

It does not matter if one of the values above are missing, e.g. background:#ff0000 url(smiley.gif); is allowed.

Default value:see individual properties
Inherited:no
Animatable:yes, see individual properties. Read about animatableTry it
Version:CSS1 + new properties in CSS3
JavaScript syntax:object.style.background="red url(smiley.gif) top left no-repeat"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
background1.04.01.01.03.5

Note: Internet Explorer 8 and earlier versions do not support multiple background images on one element.

Note: See individual browser support for each value below.

CSS Syntax

background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

Note: If one of the properties in the shorthand declaration is the bg-size property, you must use a / (slash) to separate it from the bg-position property, e.g. background:url(smiley.gif) 10px 20px/50px 50px; will result in a background image, positioned 10 pixels from the left, 20 pixels from the top, and the size of the image will be 50 pixels wide and 50 pixels high.

Note: If using multiple background-image sources but also want a background-color, the background-color parameter needs to be last in the list.

Property Values

ValueDescriptionCSS
background-colorSpecifies the background color to be used1
background-imageSpecifies ONE or MORE background images to be used1
background-positionSpecifies the position of the background images1
background-sizeSpecifies the size of the background images3
background-repeatSpecifies how to repeat the background images1
background-originSpecifies the positioning area of the background images3
background-clipSpecifies the painting area of the background images3
background-attachmentSpecifies whether the background images are fixed or scrolls with the rest of the page1
initialSets this property to its default value. Read about initial3
inheritInherits this property from its parent element. Read about inherit2

Related Pages

CSS tutorial: CSS Background, CSS Backgrounds (advanced)

HTML DOM reference: background property

'WEB > CSS' 카테고리의 다른 글

[CSS] Vertical Align  (0) 2018.01.24
[CSS]크로스 브라우징  (0) 2018.01.24
[CSS]text-indent  (0) 2018.01.18
CSS: How to align vertically a “label” and “input” inside a “div”?  (0) 2018.01.18
[CSS] Background Image Size handling  (0) 2018.01.17

+ Recent posts

티스토리툴바