bootstrapでデザインしたinputのcssを修正したい。

Question

Datepicker「ClockPicker」
http://nomochi.hateblo.jp/entry/2014/11/19/225135

これをそのまま実装しました。
白い枠(テキストボックス)の横幅を変更したいんですが、どのcssをいじればいいですか？

cssコード場所
https://github.com/accounttest47/test

1<div class="input-group clockpicker">
2    <input type="text" class="form-control" value="09:30">
3    <span class="input-group-addon">
4        <span class="glyphicon glyphicon-time"></span>
    </span>
</div>

<script type="text/javascript">
$('.clockpicker').clockpicker();
</script>

追記
1234行のdiv,input,spanそれぞれにstyle="width:10px;"という形で直接記述しても
テキストボックスのサイズは変わりませんでした。
同様にstyle.cssにそれぞれのclass指定をしサイズを変えようとしましたが変わりませんでした。top等場所は変わりました。ボックスのサイズだけ変わりません。

Comments

[m.ts10806]

現在のコード（他者がコピペで今の質問者さんの状態が分かるもの）をご提示ください。

[m.ts10806]

あと、なぜJava？

[azuapricot]

よくわからないんだったらHTMLに直接Style書いちゃえばよいじゃなーいと

Answer 1

横幅をどう変えたいのか分かりませんが、
CSSは基本的に後勝ちです。
また、フレームワークの本体CSSをいじるのはあまりないので、
その「変えたい対象」についているCSSクラスに対して自身で指定を別途作れば良いと思います。

CSSクラスだと影響範囲が大きそうなら別途自身でIDを振ってそのIDに対してだけ指定をすれば良いですし。

Comments

[退会済みユーザー]

クラスがboostrapの中にあったので、横幅を変えるcssを追記したんですが反映されませんでした。
自分でcssも作ってやってみたんですが反映されませんでした。

[m.ts10806]

と言われましても実際にどのようなコードを書かれたのか記載されないとこちらも次の展開にいけませんので。質問に対応状況追記してください。

Answer 2

form-inline をつければいいのでは？

<form class="form-inline">

https://getbootstrap.com/docs/3.3/css/#forms-inline