Forums

Changing the 'look' of the search box (17 posts)

  1. shadow
    Moderator
    Posted 5 years ago #

    Hi,
    Site: http://www.os42.com
    Just been making some changes to my css and I am stuck when it comes to changing the 'look' of the search box.
    Can anyone tell me how I go about changing this?
    Thanks :)

  2. wheezyjoe
    Member
    Posted 5 years ago #

    You can create a class like this:
    .textbox {
    border-style: none;
    background: transparent;
    }
    And then set the class in your form:
    < input name="test" value="" type="text" size="14" class="textbox" >
    [Culled from Experts Exchange]

  3. Kelso
    Member
    Posted 5 years ago #

    Yeah, do that specifically... sorry forgot to mention the important part :D

  4. shadow
    Moderator
    Posted 5 years ago #

    Thanks Kelso, wheezy joe,
    I tried all that but still could'nt get the background to be the same colour as my site.
    I most likely did something wrong - but thanks for trying - and for your patience with noobies :)
    All I am really trying to do is get that grey background out and replace it with the same colours as my body background with maybe a light border.
    It's very frustrating being so incompetent!!

  5. mamabean
    Member
    Posted 5 years ago #

    You can always use this...
    input,textarea,select {
    background-color: #FFFFFF;
    border: 1px solid #000000;
    color: #6C715B; }

    Works for me. :)

  6. shadow
    Moderator
    Posted 5 years ago #

    Here I go again making a fool of myself - this is becoming a bad habit on this forum.
    Where exactly does that go mamabean? I put it straight into my css but it makes no difference.
    I know I will be stoned to death for such blasphemy, but sometimes, just sometimes - I miss html.... :)

  7. mamabean
    Member
    Posted 5 years ago #

    I know how you feel... sometimes I miss the simplicity myself. LOL
    Anyways... yes, it just goes straight into the css file you use. Looking at your css (I hope you don't mind my peeking), I saw you have the following...
    input {
    border: 1px solid #556;
    }
    textarea {
    width: col="70";
    border: 1px solid #556;
    }

    I wonder if it is conflicting with that? Try adding
    background-color: #FFFFFF;
    to them... making the color whatever you choose.
    I'm by no means a css expert though. Just grasping at straws. :)

  8. shadow
    Moderator
    Posted 5 years ago #

    Thanks for offering another suggestion but it is still no go....I can't believe something so simple as a background has consumed so many hours of my time...
    Greys nice...I like grey...I love grey...GREY IS ME!..

  9. podz
    Support Maven
    Posted 5 years ago #

    #menu li form input{
    background-color: #00ffff;
    }
    Stick that in ?

  10. podz
    Support Maven
    Posted 5 years ago #

    Just a thought - try making your line look like this in index.php
    <input type="text" name="s" id="s" size="15" />

    It's the id="s" to add.
    It's the only difference I can see between the actual Search button on your page and the one on mine.

  11. shadow
    Moderator
    Posted 5 years ago #

    Yeehaaaaaaaaa....
    Podz wins the prize! Finally - wow! And to think I thought databases were hard to deal with!
    Thanks heaps Podz :) :)

  12. podz
    Support Maven
    Posted 5 years ago #

    Cool !
    Am I glad I've got a testblog or what - lots of playing to find that !!
    And that is most definitely finding it's way into the CSS guide soon !

  13. podz
    Support Maven
    Posted 5 years ago #

    I've just switched the hilite plugin on with my testblog, hard refreshed several times and all is okay .....
    I don't think that error will be css related ... until I'm proved wrong that is :)

  14. shadow
    Moderator
    Posted 5 years ago #

    Ok Podz...I will be the guinea pig and keep you informed...
    I deactivated my google thingymajig and have put the search entry back into the css.
    Fingers crossed :)

  15. PETbottle
    Member
    Posted 5 years ago #

    Incidentally, I was just fiddling with my search box today, too. I only wish I had seen this thread first... it would have saved me a lot of work.
    I have one follow-up question: on shadow's site (and mine as well), when you click inside the search box, the search button gets a darkened border. Is there anyway to stop that from happening?
    Cheers!

  16. Oisin
    Member
    Posted 5 years ago #

    I had noticed that too (it happens on my blog as well) - I'm not sure what's causing it, but it only seems to happen in IE (surprise, surprise), so I assume it's some kind of decision on Microsoft's part to highlight the submit buttons when you "enter" a form. If you'll notice, the same thing happens in the comment form - as soon as you click on either the textarea or the name input field, the submit box gets 'blackbordered'...

  17. podz
    Support Maven
    Posted 5 years ago #

    PETBottle / Oisin - not sure yet, and I'd tend to agree that it is related to the 'form' element, but I've just posted some more on how to customize the search box.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.