7 Replies - 56728 Views - Last Post: 15 May 2012 - 06:49 AM

#1 ninethousandfeet@msn.com  Icon User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 310
  • Joined: 09-February 09

Style Select Drop-down list

Post icon  Posted 10 September 2009 - 07:07 PM

Hello.

I am looking for someone to point me in the right direction. My problem is that I am trying to style my select drop-down menu something like the Country field in this sites register form:
http://swagbucks.com/?cmd=sb-register

and the only articles I seem to find are related to styling the drop-down menus are for menus like this:
http://www.cssplay.c...final_drop.html (referring

Am I just that big of a newbie that I am calling it something different? Any recommendations, articles, etc. where I can learn how to style the first scenario?

Thank you so much!

Is This A Good Question/Topic? 0
  • +

Replies To: Style Select Drop-down list

#2 ahmad_511  Icon User is offline

  • MSX
  • member icon

Reputation: 131
  • View blog
  • Posts: 722
  • Joined: 28-April 07

Re: Style Select Drop-down list

Posted 11 September 2009 - 03:19 AM

hi,
try adding padding:2px to the select style
<select style="padding:2px;">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>


and if you want you can specify the width property too

hope it helps
Was This Post Helpful? 0
  • +
  • -

#3 ninethousandfeet@msn.com  Icon User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 310
  • Joined: 09-February 09

Re: Style Select Drop-down list

Posted 11 September 2009 - 09:08 AM

so, if i want to make a select list and have it similar to the style of tumblr.com's input text boxes, then i can do it. i just need to make a style for it? or i need to make a class to do something like this?

by no means do i want you to create this for me, i am just looking for advice on where to learn about styling these types of menus and if it is possible to make it look a certain way.

thank you so much.
Was This Post Helpful? 0
  • +
  • -

#4 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 219
  • View blog
  • Posts: 1,604
  • Joined: 20-January 09

Re: Style Select Drop-down list

Posted 11 September 2009 - 10:20 AM

In the end it's the same thing, a class or a style - they end up accomplishing the same result. The only difference is putting it in a css document cleans up your markup (HTML) allowing for easier access to both your styles and your code.

--

Greg
Was This Post Helpful? 0
  • +
  • -

#5 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 219
  • View blog
  • Posts: 1,604
  • Joined: 20-January 09

Re: Style Select Drop-down list

Posted 11 September 2009 - 10:26 AM

TO get more to your point, any element that is within your markup you can style. SO - your select box you can go pretty crazy:

CSS:
.testingStyles {
	font-size: 25px;
	width: 250px;
	color: white;
	background: green;
	margin: 5px 25px;
	border: 3px double black;
	padding: 15px;}



HTML:
<select class="testingStyles">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>



Produces:
Attached Image

--

Greg
Was This Post Helpful? 1
  • +
  • -

#6 ninethousandfeet@msn.com  Icon User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 310
  • Joined: 09-February 09

Re: Style Select Drop-down list

Posted 11 September 2009 - 10:57 AM

perfect! thanks for the explanation greg. you have helped me out once again.

thank you all, i will work on this and see what i can do.
Was This Post Helpful? 0
  • +
  • -

#7 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 219
  • View blog
  • Posts: 1,604
  • Joined: 20-January 09

Re: Style Select Drop-down list

Posted 11 September 2009 - 11:21 AM

Sounds good.

--

Greg
Was This Post Helpful? 0
  • +
  • -

#8 bantayso  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 15-May 12

Re: Style Select Drop-down list

Posted 15 May 2012 - 06:49 AM

Thank your support, i applied into our project.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1