Bug 1055357 - Compose message form has a misleading role of "search"

you still need to add selectors with `.input-box` in https://github.com/mozilla-b2g/gaia/blob/master/shared/style/input_areas.css.

What Arnau suggested is to replace every selectors containing `form[role=search]` by replacing this by `.input-box`.

So say, if there is `form[role="search"] p`, you replace by `.input-box p`.

And then obviously you need to add the class in every app in Gaia that uses this so that they retain the style.

here is the full list:
```
apps/communications/contacts/elements/search.html:    <form id="searchview-container" class="search" role="search">
apps/communications/contacts/index.html:                <form id="search-container" class="search" role="search">
apps/communications/contacts/test/unit/import/mock_import.html:      <form id="search-container" role="search" class="search">
apps/communications/contacts/test/unit/mock_contact_list_dom.js.html:'            <form id="search-container" class="search" role="search">' +
apps/communications/contacts/test/unit/mock_contacts_index.html:            <form id="search-container" class="search" role="search">
apps/communications/contacts/test/unit/mock_contacts_index.html:        <form id="searchview-container" class="search" role="search">
apps/email/js/cards/message_list.html:  <form role="search" data-event="submit:onSearchSubmit">
apps/email/js/cards/message_list.html:    <form role="search" data-prop="searchBar"
apps/music/index.html:        <form id="views-tiles-search" role="search" class="skin-dark">
apps/music/index.html:        <form id="views-list-search" role="search" class="skin-dark">
apps/sms/index.html:            <form id="messages-compose-form" role="search" class="bottom" data-message-type="sms">
shared/pages/import/import.html:          <form id="search-container" role="search" class="search">
shared/pages/import/import.html:        <form id="searchview-container" role="search" class="search">
shared/style/input_areas/index.html:  <form role="search">
shared/style/input_areas/index.html:  <form role="search">
shared/style/input_areas/index.html:    <form role="search" class="skin-dark">
shared/style/input_areas/index.html:    <form role="search" class="skin-dark">
shared/style/input_areas/index.html:  <form role="search" class="bottom">
shared/style/input_areas/index.html:  <form role="search" class="bottom">
shared/style/input_areas/index.html:  <form role="search" class="bottom">
tests/python/gaia-ui-tests/gaiatest/apps/email/app.py:    _search_textbox_locator = (By.CSS_SELECTOR, 'form[role="search"]')
```
The last one is a Python test, I think it makes sense to use `.input-box` here too.

I have a small fear: the specifity of `.input-box` is lower than `form[role=search]`, so maybe some overrides won't work well. We'll need to test each occurence, but I can help you with this.

Tell me if this is ok for you; if you don't have the time to do this, we can instead duplicate the selectors in input_areas.css.