Annie C
Annie C

Reputation: 804

how to override nokia basic searchbox input style?

I am trying the basic searchbox feature on the API doc http://api.maps.nokia.com/places/BasicSearchBoxExample.html

The HERE api searchbox is too short, I would like to style it. Here is my html

<div id="container">
    <div id="basicSearchBox"></div>
</div> 

I don't have access to the below html section (it was generated by the reference in the header <script src="http://api.maps.nokia.com/places/beta3/jsPlacesAPI.js"></script> )

How do I style the input box 'nokia-searchbox-input' to increase the height?

<div id="container">
  <div id="basicSearchBox" class="nokia-places-general-searchbox">
    <div class="nokia-searchbox">
      <input class="nokia-searchbox-input" type="text" rel="searchbox-input">
      <input class="nokia-searchbox-button" type="button" rel="searchbox-button" value="Search">
      <div rel="searchbox-list" class="nokia-searchbox-list" style="display: none;">
        <div class="nokia-searchbox-list-border"></div>
        <dl class="suggest-current"></dl>
        <dl class="suggest-saved"></dl>
        <dl class="suggest-nokia"></dl>
        <dl class="suggest-search"></dl>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Views: 40

Answers (1)

DROPKICK
DROPKICK

Reputation: 189

Let me know if I'm misunderstanding, but you should be able to just add this to your CSS:

.nokia-places-general-searchbox .nokia-searchbox-input {
    height: 20px; /* whatever you want the height to be */
}

Upvotes: 1

Related Questions